日期:2014-05-16 浏览次数:20378 次
给出比较全面的模态窗口的范例,供以后参考:
本例只是大概列出各控件的相关设置,没有进行精细话调整,各位可以自己去细化,熟悉各控件。
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' }]