Extjs4表单布局经验

在使用Extjs4的时候，对于表单设计的默认布局，在表单项很少的时候还是比较好用的。但是表单项多了以后就难免需要将表单分块、分类等等。Extjs4提供了vbox和hbox来处理这些。不过，其实有一些更加简单的方法来处理这种布局需求。

Extjs4的表单默认布局是纵向的，原form类型的布局，现在form关键字去掉了，这个布局就是默认布局了。

先上图：

这个图是冒险商人项目的其中一个form。用于装备信息提交。由于页面限制，如果只是用默认布局的话，在小显示器上就无法显示完全，以至于表单都无法正常插入数据。

后来我查阅了很多网上资料，又试了几次，每次浏览器都报undefined错。然后我就奇怪了。后来看到了原来Extjs4版本，去掉了布局类型‘form’，当layout设置为form的时候就会报错了。注意！

实现上图这个布局很简单。首先设置form的layout为‘column’类型的。然后加入3个panel到这个form的items里。再在每一个panel里面加入所设计的表单组件。这个panel不用设置layout，就使用默认的就ok。

form的整体代码如下：

addEquipForm = Ext.create('Ext.form.Panel',{id: 'addEquipForm',enctype:'multipart/form-data',fileUpload: true,bodyPadding: 5,height: '100%',width: '100%',region:'center',layout:'column',buttonAlign: 'left',items:[{xtype:'panel',border:false,frame:true,width:'30%',defaults:{labelSeparator:': ',labelWidth: 65,width: 200,allowBlank: true,labelAlign: 'top',cls: 'equipCls'},items:[{xtype: 'textfield',name: 'name',fieldLabel: '装备名称',allowBlank: false},{xtype: 'button',name: 'duplicate',text: 'check',width: 40,x: 165,y: 5,handler: function() {var form_t = Ext.getCmp('addEquipForm').getForm().getValues();var type = 0;var key = form_t.name;checkDuplicate(key,type);}},{xtype: 'numberfield',name: 'price',fieldLabel: '价格',width: 90,minValue: 0},{xtype: 'combo',width: 90,listConfig:{maxHeight: 100},name: 'equipUnit',fieldLabel: '单位',triggerAction: 'all',store: unitClass, //指定类型displayField: 'typeName',valueField: 'typeValue',queryMode: 'local',forceSelection: true,typeAhead: true,value: '万'},{xtype: 'numberfield',name: 'level',fieldLabel: '等级',width: 90,minValue: 0,maxValue: 200}]},{xtype:'panel',border:false,frame:false,width:'30%',defaults:{labelSeparator:': ',labelWidth: 65,width: 200,allowBlank: true,labelAlign: 'top',cls: 'equipCls'},items:[{xtype: 'fieldset',title: '限定职业',defaultType: 'radio',layout: 'anchor',flex: 1,defaults: {anchor: '100%',hideEmptyLabel: false},items: [{checked: true,fieldLabel:'选择职业', boxLabel: '全职业',name: 'profession',inputValue: '全职业',cls: 'equipRadioCls'},{boxLabel: '战士',name: 'profession',inputValue: '战士',cls: 'equipRadioCls'}, {boxLabel: '魔法师',name: 'profession',inputValue: '魔法师',cls: 'equipRadioCls'},{boxLabel: '弓箭手',name: 'profession',inputValue: '弓箭手',cls: 'equipRadioCls'},{boxLabel: '飞侠',name: 'profession',inputValue: '飞侠',cls: 'equipRadioCls'},{boxLabel: '海盗',name: 'profession',inputValue: '海盗',cls: 'equipRadioCls'},{boxLabel: '暗影双刀',name: 'profession',inputValue: '暗影双刀',cls: 'equipRadioCls'}]}]},{xtype:'panel',border:false,frame:false,width:'30%',defaults:{labelSeparator:': ',labelWidth: 65,width: 200,allowBlank: true,labelAlign: 'top',cls: 'equipCls'},items:[{xtype: 'combo',id: 'equipClass',width: 120,name: 'equipClass',fieldLabel: '所属大类',triggerAction: 'all',　queryMode:'local',　store:equipmentClass,　valueField:'typeValue',　displayField:'typeName',forceSelection: true,typeAhead: true},{xtype: 'combo',id: 'equipSubClass',width: 120,name: 'equipSubClass',listConfig:{maxHeight: 220},fieldLabel: '所属小类',triggerAction: 'all',　queryMode:'local',　store:equipmentSubClass,　valueField:'value',　displayField:'text'},{xtype: 'filefield',name: 'imagePath',fieldLabel: '图片',emptyText:'选择装备图片(32*32)',buttonText:'浏览'}]}],buttons:[{text: '保存装备数据',margins: '5 5 5 10',width: 60,height: 30,handler: function(){var form = this.up('form').getForm();if(form.isValid()){form.submit({url: 'AddEquipData',waitTitle: '请稍后',waitMsg: '保存装备记录...',success: function(fp, o) {Ext.MessageBox.alert('成功', '装备信息录入完成！');},failure: function(fp, o) {Ext.MessageBox.alert('失败', '无法录入装备信息！');}});}}}]});

当然，每一个panel里面还可以再具体分类，实现所需的效果。如图：