【倾家荡产】Ext小白求高手帮个忙(画界面)

Question

公司有个小项目需要用Ext做，但是小弟我从来没接触过Ext，现在一大任务就是先把界面画出来，可是作为一个Ext小白的我，表示很无奈！所以现在来求助高手，帮个忙了、谢谢！

Answer 1

兄弟，看下EXTJS的API把，有源码实列的！祝你成功

Answer 2

有些都可以直接copy到项目里面去用的

Answer 3

都是比较基本的界面，写了一个，其他的照着写Ext.onReady(function() {
    var form = new Ext.form.FormPanel({
        title: "Form1", bodyStyle: "padding:10px", width: 550,
        tbar: [{ text: "保存"}],
        renderTo: "form1",
        items: [
            {
                xtype: "fieldset", title: "Web说明书登记", height: 90, labelWidth: 90,
                items: [
                    {
                        layout: "column", border: false,
                        defaults: { layout: 'form', border: false, labelWidth: 90, defaults: { anchor: '99%'} },
                        items: [
                     {
                         width: 200,
                         items: { xtype: "textfield", name: "", fieldLabel: "商品编号/名称" }
                     },
                     {
                         width: 150,
                         items: { xtype: "textfield", name: "", hideLabel: true }
                     },
                     {
                         width: 80,
                         items: { xtype: "button", width: 30, text: "选择..." }
                     }
                       ]
                    }, {
                        xtype: "textfield", name: "", fieldLabel: "文件", inputType: "file", anchor: "99%"
                    }
                ]            }, {
                xtype: "fieldset", title: "Web说明书登记", height: 200,
                items: [
                    {
                        layout: "column", defaults: { layout: 'form', border: false, labelWidth: 40, defaults: { anchor: '99%'} }, border: false,
                        items: [
                            {
                                width: 200,
                                items: new Ext.form.ComboBox({
                                    fieldLabel: '状态', hiddenName: '', name: '', resizable: true,
                                    store: new Ext.data.SimpleStore({
                                        fields: ['value', 'text'],
                                        data: [[1, '状态1'], [2, '状态2']]
                                    }),
                                    valueField: 'value', displayField: 'text', mode: 'local',
                                    triggerAction: 'all', editable: false, value: 1, listWidth: this.width
                                })
                            },
                     {
                         width: 200,
                         items: new Ext.form.ComboBox({
                             fieldLabel: '模版', hiddenName: '', name: "", resizable: true,
                             store: new Ext.data.SimpleStore({
                                 fields: ['value', 'text'],
                                 data: [[1, '模版1'], [2, '模版2']]
                             }),
                             valueField: 'value', displayField: 'text', mode: 'local',
                             triggerAction: 'all', editable: false, value: 1, listWidth: this.width
                         })
                     }
                        ]
                    },
                    {
                        xtype: "htmleditor", anchor: '99% 80%', hideLabel: true
                    }
                ]
            }
        ]
    })
});

Answer 4

参照ext sample
照它里面的写 足够了

Answer 5

借用下官方实例Ext.onReady(function() {
    Ext.grid.dummyData = [
        ['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am', 'Manufacturing'],
        ['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am', 'Manufacturing'],
        ['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am', 'Manufacturing'],
        ['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am', 'Finance'],
        ['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am', 'Services'],
        ['AT&T Inc.', 31.61, -0.48, -1.54, '9/1 12:00am', 'Services'],
        ['Boeing Co.', 75.43, 0.53, 0.71, '9/1 12:00am', 'Manufacturing'],
        ['Caterpillar Inc.', 67.27, 0.92, 1.39, '9/1 12:00am', 'Services'],
        ['Citigroup, Inc.', 49.37, 0.02, 0.04, '9/1 12:00am', 'Finance'],
        ['E.I. du Pont de Nemours and Company', 40.48, 0.51, 1.28, '9/1 12:00am', 'Manufacturing'],
        ['Exxon Mobil Corp', 68.1, -0.43, -0.64, '9/1 12:00am', 'Manufacturing'],
        ['General Electric Company', 34.14, -0.08, -0.23, '9/1 12:00am', 'Manufacturing'],
        ['General Motors Corporation', 30.27, 1.09, 3.74, '9/1 12:00am', 'Automotive'],
        ['Hewlett-Packard Co.', 36.53, -0.03, -0.08, '9/1 12:00am', 'Computer'],
        ['Honeywell Intl Inc', 38.77, 0.05, 0.13, '9/1 12:00am', 'Manufacturing'],
        ['Intel Corporation', 19.88, 0.31, 1.58, '9/1 12:00am', 'Computer'],
        ['International Business Machines', 81.41, 0.44, 0.54, '9/1 12:00am', 'Computer'],
        ['Johnson & Johnson', 64.72, 0.06, 0.09, '9/1 12:00am', 'Medical'],
        ['JP Morgan & Chase & Co', 45.73, 0.07, 0.15, '9/1 12:00am', 'Finance'],
        ['McDonald\'s Corporation', 36.76, 0.86, 2.40, '9/1 12:00am', 'Food'],
        ['Merck & Co., Inc.', 40.96, 0.41, 1.01, '9/1 12:00am', 'Medical'],
        ['Microsoft Corporation', 25.84, 0.14, 0.54, '9/1 12:00am', 'Computer'],
        ['Pfizer Inc', 27.96, 0.4, 1.45, '9/1 12:00am', 'Services', 'Medical'],
        ['The Coca-Cola Company', 45.07, 0.26, 0.58, '9/1 12:00am', 'Food'],
        ['The Home Depot, Inc.', 34.64, 0.35, 1.02, '9/1 12:00am', 'Retail'],
        ['The Procter & Gamble Company', 61.91, 0.01, 0.02, '9/1 12:00am', 'Manufacturing'],
        ['United Technologies Corporation', 63.26, 0.55, 0.88, '9/1 12:00am', 'Computer'],
        ['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am', 'Services'],
        ['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am', 'Retail'],
        ['Walt Disney Company (The) (Holding Company)', 29.89, 0.24, 0.81, '9/1 12:00am', 'Services']
    ];
    var xg = Ext.grid;    var reader = new Ext.data.ArrayReader({}, [
       { name: 'company' },
       { name: 'price', type: 'float' },
       { name: 'change', type: 'float' },
       { name: 'pctChange', type: 'float' },
       { name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia' },
       { name: 'industry' },
       { name: 'desc' }
    ]);
    var expander = new Ext.ux.grid.RowExpander({
        tpl: new Ext.Template(
            '<p><b>内容:</b> {company}</p>'
        )
    });    var grid1 = new xg.GridPanel({
        store: new Ext.data.Store({
            reader: reader,
            data: xg.dummyData
        }),
        cm: new xg.ColumnModel({
            defaults: {
                width: 20,
                sortable: true
            },
            columns: [
                expander,
                { id: 'company', header: "Company", width: 40, dataIndex: 'company' },
                { header: "Price", renderer: Ext.util.Format.usMoney, dataIndex: 'price' },
                { header: "Change", dataIndex: 'change' },
                { header: "% Change", dataIndex: 'pctChange' },
                { header: "Last Updated", renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange' }
            ]
        }),
        viewConfig: {
            forceFit: true
        },
        width: 600,
        height: 300,
        plugins: expander,
        iconCls: 'icon-grid'
    });    var form = new Ext.form.FormPanel({
        title: "Form1", bodyStyle: "padding:10px", width: 900,
        tbar: [{ text: "保存"}],
        renderTo: "form1",
        items: [
            {
                xtype: "fieldset", title: "商品推荐管理", height: 90, labelWidth: 90,
                items: [
                    {
                        layout: "column", border: false,
                        defaults: { layout: 'form', border: false, labelWidth: 90, defaults: { anchor: '99%'} },
                        items: [
                     {
                         width: 200,
                         items: { xtype: "datefield", name: "", fieldLabel: "查询日期" }
                     },
                     {
                         width: 30,
                         html: "---"
                     },
                     {
                         width: 100,
                         items: { xtype: "datefield", name: "", hideLabel: true }
                     },
                     {
                         width: 200,
                         items: new Ext.form.ComboBox({
                             fieldLabel: '状态', hiddenName: '', name: '', resizable: true,
                             store: new Ext.data.SimpleStore({
                                 fields: ['value', 'text'],
                                 data: [[1, '状态1'], [2, '状态2']]
                             }),
                             valueField: 'value', displayField: 'text', mode: 'local',
                             triggerAction: 'all', editable: false, value: 1, listWidth: this.width
                         })
                     },
                     {
                         width: 200,
                         items: new Ext.form.ComboBox({
                             fieldLabel: '类型', hiddenName: '', name: "", resizable: true,
                             store: new Ext.data.SimpleStore({
                                 fields: ['value', 'text'],
                                 data: [[1, '类型1'], [2, '类型2']]
                             }),
                             valueField: 'value', displayField: 'text', mode: 'local',
                             triggerAction: 'all', editable: false, value: 1, listWidth: this.width
                         })
                     }
                       ]
                    },
                    {
                        layout: "column", border: false,
                        defaults: { layout: 'form', border: false, labelWidth: 90, defaults: { anchor: '99%'} },
                        items: [
                            {
                                width: 200,
                                items: new Ext.form.ComboBox({
                                    fieldLabel: '大分类', hiddenName: '', name: '', resizable: true,
                                    store: new Ext.data.SimpleStore({
                                        fields: ['value', 'text'],
                                        data: [[1, '大分类1'], [2, '大分类2']]
                                    }),
                                    valueField: 'value', displayField: 'text', mode: 'local',
                                    triggerAction: 'all', editable: false, value: 1, listWidth: this.width
                                })
                            },
                            {
                                width: 130,
                                items: new Ext.form.ComboBox({
                                    fieldLabel: '中分类', hiddenName: '', name: '', resizable: true, hideLabel: true,
                                    store: new Ext.data.SimpleStore({
                                        fields: ['value', 'text'],
                                        data: [[1, '中分类1'], [2, '中分类2']]
                                    }),
                                    valueField: 'value', displayField: 'text', mode: 'local',
                                    triggerAction: 'all', editable: false, value: 1, listWidth: this.width
                                })
                            },
                            {
                                width: 350,
                                items: {
                                    xtype: "textfield", name: "", fieldLabel: "文件", inputType: "file", anchor: "99%"
                                }
                            }
                        ]                    }
                ]            }, {
                xtype: "fieldset", height: 350, layout: "fit",
                items: grid1
            }
        ]
    })
});

Answer 6

请教高手：var form1 = new Ext.form.FormPanel( {
title : "商品基本信息",
bodyStyle : "padding:10px",
autoHeight : true,
frame:true,
renderTo : "form",
layout:'form',
items : [ {
xtype : "fieldset",
title : "商品基本信息",
layout : "column",
items : [ {
xtype : "textfield",
allowBlank : false,
fieldLabel : '商品名称',
emptyText : "请输入商品名称"
} ]
}]
})});我的这段代码，为什么fieldLabel : '商品名称',不显示，只显示文本框

Answer 7

Ext.onReady(function() {    var form1 = new Ext.form.FormPanel({
        title: "商品基本信息",
        bodyStyle: "padding:10px",
        autoHeight: true,
        frame: true,
        renderTo: "form",
        layout: 'form',
        items: [
        {
            xtype: "fieldset",
            title: "商品基本信息",
            layout: "column",
            items: [
                {
                    layout: "form",
                    items: {
                        xtype: "textfield",
                        allowBlank: false,
                        fieldLabel: '商品名称',
                        emptyText: "请输入商品名称"
                    }
                }
            ]
}]
        })
    });