Extjs 4.0.7 设计复杂窗口的范例

来源：互联网发布：淘宝卖中草药编辑：程序博客网时间：2024/06/02 20:27
给出比较全面的模态窗口的范例，供以后参考：
本例只是大概列出各控件的相关设置，没有进行精细话调整，各位可以自己去细化，熟悉各控件。
    var win = Ext.create('Ext.window.Window', {        title: 'Resize Me',        width: 600,        height: 500,        minWidth: 300,        minHeight: 200,        modal: true,        plain: true,        layout: 'anchor',        fieldDefaults: {                xtype: 'textfield'        },    items:[{        xtype: 'panel',        layout: 'column',        items: [{            layout: 'anchor',            columnWith: .5,            baseCls: 'x-plain',            //defaults:[width:80],            //labelWidth: 90,            items: [{                fieldLabel: '工作ID',                xtype: 'textfield',                width:200,                labelWidth: 50,                name: 'job_id',                value: '22'            }, {                fieldLabel: '工作说明',                xtype: 'textfield',                name: 'job_desc',                readOnly: true,   //是否可以输入                value: ''            }, {                xtype: 'checkboxfield',                name: 'checkbox1',                fieldLabel: 'Checkbox',                boxLabel: 'box label'            }, {                xtype: 'radiofield',                name: 'radio1',                value: 'radiovalue1',                fieldLabel: 'Radio buttons',                boxLabel: 'radio 1'            }, {                xtype: 'radiofield',                name: 'radio1',                value: 'radiovalue2',                fieldLabel: '',                labelSeparator: '',                hideEmptyLabel: false,                boxLabel: 'radio 2'            }, {                xtype: 'datefield',                format: 'Y-m-d',                value: '1990-01-01',   //new Date();  默认当前日期                //readOnly:true,   //是否可以输入                name: 'date1',                fieldLabel: '出生年月'            }, {                xtype: 'textfield',                name: 'password1',                inputType: 'password',                fieldLabel: '密码'            }]        }, {            columnWith: .5,            fieldDefaults: {                xtype: 'textfield',                labelAlign: 'right',                labelWidth: 60,                anchor: '100%'            },            items: [{                fieldLabel: '性别',                xtype: 'combobox',                name: 'sex',                queryMode: 'local',   //指明本地获取数据                displayField: 'sex_name',                valueField: 'sex_id',                allowBlank: false,                editable: false,                //readOnly:true,                store: new Ext.create('Ext.data.Store', {                    fields:['sex_id','sex_name'],                    data:[{'sex_id':'1','sex_name':'男'},{'sex_id':'0','sex_name':'女'}]                }),                value: '1'            }, {                fieldLabel: '年龄',                xtype: 'numberfield',                name: 'numberfield1',                value: 5,                minValue: 0,                maxValue: 50            }, {                fieldLabel: '照片',                inputType: 'image',                xtype: 'textfield',                width: 100,                height: 100            }]        }]    }, {                width: 500,                fieldLabel: '说明1',                xtype: 'textfield',                name: 'remark1',                value: '22'    },{                  width: 500,                fieldLabel: '说明2',                xtype: 'textfield',                name: 'remark2',                value: '22'    }],        buttons: [{            text: 'Send'        }, {            text: 'Cancel'        }]    });    win.show();    //formPanel.render('form-ct');});
样式图：