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里面还可以再具体分类，实现所需的效果。如图：