Extjs 4.0.7 设计复杂窗口的范例

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

本例只是大概列出各控件的相关设置，没有进行精细话调整，各位可以自己去细化，熟悉各控件。
[javascript] 
    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'); 
}); 
样式图：