Extjs 4.0.7 设计复杂窗口的范例

给出比较全面的模态窗口的范例，供以后参考：

本例只是大概列出各控件的相关设置，没有进行精细话调整，各位可以自己去细化，熟悉各控件。

    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');
});

样式图：