ext4表单实例

　　不说废话，直接贴代码和截图
　　
　　width: 780, bodyPadding: 0, border: 0, border:false, fieldDefaults: { labelAlign: 'left', labelWidth: 90, anchor: '100%' }, items: [ { layout:'column', items:[ { columnWidth:.33, defaultType: 'textfield', items: [{ fieldLabel: '姓名', name: 'first' },{ fieldLabel: '出生年月', xtype:'datefield', name: 'company1' },{ fieldLabel: '学位', xtype:'datefield', name: 'company2' }] }, { columnWidth:.33, defaultType: 'textfield', items: [{ fieldLabel: '性别', name: 'first' }, { fieldLabel: '政治面貌', xtype:'datefield', name: 'company3' },{ fieldLabel: '党政职务', xtype:'datefield', name: 'company4' }] }, { columnWidth:.33, defaultType: 'textfield', items: [ nationCombo, { fieldLabel: '学历', xtype:'datefield', name: 'company', anchor:'95%' },{ fieldLabel: '社会兼职职务', xtype:'datefield', name: 'company', anchor:'95%' }] } ] }, //第二块开始 { layout:'column', border:true, items:[ { columnWidth:.48, layout: 'anchor', xtype: 'fieldcontainer', fieldLabel: '专业技术', labelWidth: 85, combineErrors: true, msgTarget : 'side', layout: 'hbox', defaults: { flex: 1, hideLabel: true }, items: [ { xtype: 'fieldcontainer', fieldLabel: '', combineErrors: true, msgTarget : 'side', defaults: { flex: 1, hideLabel: false }, items: [ { xtype : 'textfield', name : 'startDate', fieldLabel: '名称', margin: '0 0 0 0', allowBlank: false }, { xtype : 'datefield', name : 'endDate', fieldLabel: '获取时间（年月）', allowBlank: false } ] } ] },{ columnWidth:.5, layout: 'anchor', xtype: 'fieldcontainer', fieldLabel: '行政职级', combineErrors: true, msgTarget : 'side', layout: 'hbox', labelWidth: 127, defaults: { flex: 1, hideLabel: true }, items: [ { xtype: 'fieldcontainer', fieldLabel: '', combineErrors: true, msgTarget : 'side', defaults: { flex: 1, hideLabel: false }, items: [ { xtype : 'textfield', name : 'startDate', fieldLabel: '名称', margin: '0 0 0 0', allowBlank: false }, { xtype : 'datefield', name : 'endDate', fieldLabel: '获取时间(年月)', allowBlank: false } ] } ] } ] },//第二块结束 //第三块开始 { layout:'column', border:true, items:[ { columnWidth:.68, layout: 'anchor', xtype: 'fieldcontainer', fieldLabel: '所取得的行业资格证书名称及等级', labelWidth: 85, combineErrors: true, msgTarget : 'side', layout: 'hbox', defaults: { flex: 1, hideLabel: true }, items: [ { xtype: 'fieldcontainer', fieldLabel: '', combineErrors: true, msgTarget : 'side', defaults: { flex: 1, hideLabel: false }, items: [ { xtype : 'textfield', name : 'startDate', fieldLabel: '最高行业资格证书名称', labelWidth: 125, margin: '0 0 0 0', allowBlank: false }, { xtype: 'checkboxfield', name: 'radio1', value: 'radiovalue1', fieldLabel: '行业资格等级', boxLabel: '高级' }, { xtype: 'checkboxfield', name: 'radio1', value: 'radiovalue2', fieldLabel: '', labelSeparator: '', hideEmptyLabel: false, boxLabel: '中级' }, { xtype: 'checkboxfield', name: 'radio1', value: 'radiovalue2', fieldLabel: '', labelSeparator: '', hideEmptyLabel: false, boxLabel: '初级' }, { xtype : 'datefield', name : 'endDate', fieldLabel: '获取时间(年月)', allowBlank: false } ] } ] },{ columnWidth:.30, layout: 'anchor', xtype: 'fieldcontainer', fieldLabel: '人员状态', labelWidth: 85, combineErrors: true, msgTarget : 'side', defaults: { flex: 1, hideLabel: true }, items: [ { xtype: 'checkboxfield', name: 'radio1', value: 'radiovalue1', fieldLabel: '', boxLabel: '在岗' }, { xtype: 'checkboxfield', name: 'radio1', value: 'radiovalue2', fieldLabel: '', labelSeparator: '', hideEmptyLabel: false, boxLabel: '新进第一年' }, { xtype: 'checkboxfield', name: 'radio1', value: 'radiovalue2', fieldLabel: '', labelSeparator: '', hideEmptyLabel: false, boxLabel: '距退休不足两年' }, { xtype: 'checkboxfield', name: 'radio1', value: 'radiovalue2', fieldLabel: '', labelSeparator: '', hideEmptyLabel: false, boxLabel: '不在岗超半年' }, { xtype: 'checkboxfield', name: 'radio1', value: 'radiovalue2', fieldLabel: '', labelSeparator: '', hideEmptyLabel: false, boxLabel: '其他' } ] } ] },//第三块结束 //第四块开始 { layout:'column', items:[ { columnWidth:.5, defaultType: 'textfield', items: [{ fieldLabel: '所在部门', name: 'first' }] }, { columnWidth:.5, defaultType: 'textfield', items: [{ fieldLabel: '联系电话', name: 'first' }] } ] }//第四块结束 ], dockedItems: [{ xtype: 'toolbar', ui: 'footer', dock: 'bottom', layout: { type: 'hbox', pack: 'center' }, items: [{xtype: 'checkboxfield', boxLabel: '', name: 'cb-cust-1'},{ text: '保存', width:80, disabled: true }] }] }); formPanel.render('form-ct'); }); // -->