ExtJS创建Form表单

前言

    系统页面基本离不开Form表单，一般情况下我们的表单都是在页面中用HTML代码写一个Form，然后在Form中写各种控件，然后是一个type为submit的按钮，在Form中设置method提交的方式和action提交的路径，这样就可以了。但是用ExtJS，Form表单的封装就显得简单了，只需要用JS写出各个控件，组合在Form中就OK了。

Form表单

    还是面向对象的思想，把Form表单拆开一部分一部分的。首先这个表单里面有下拉框，有普通的text框，然后是按钮。当然如果有需要其他控件的，可以定义完了自己加进去。

首先是四个ComboBox控件：

var sLevel = new Ext.form.ComboBox({
	fieldLabel:'通知级别',//ComboBox前面的提示
	xtype:'combo',
	name:'SLEVEL',//ComboBox的名称
	hiddenName:'SLEVEL',
	anchor:'100%',
	triggerAction:'all',
	mode:'local',
	editable:false,
	allowBlank:false,//Form自动验证不为空
	disabled:false,
	display:true,
	emptyText:'请选择一项...',//下拉框的默认显示
	store:new Ext.data.ArrayStore({//写死在JS中的下拉框选项
		id:1,
		fields:['id','text'],
		data:[['1','一级通报'],['2','二级通报'],['3','三级通报']]
	}),
	valueField:'id',//选项的值
	displayField:'text'//选项的显示
});

var sCounty = new Ext.form.ComboBox({
	fieldLabel:'区县',
	xtype:'combo',
	name:'SCOUNTY',
	hiddenName:'SCOUNTY',
	anchor:'100%',
	triggerAction:'all',
	mode:'local',
	editable:false,
	allowBlank:false,
	disabled:false,
	display:true,
	emptyText:'请选择一项...',
	store:countyStore,//下拉框的选项是从数据库获取的，countyStore是下拉框的选项来源
	valueField:'GDSTREECODE',
	displayField:'GDSTITLE',
	listeners:{//监听事件，当该下拉框选项被选中时，根据该区县选项查询该区县下面的乡镇
		'select':function(thiz,record,index){
			townStore.removeAll();
			sTown.clearValue();
			townStore.proxy=new Ext.data.HttpProxy({url:CONTEXT_PATH + 'findTown.action?casecountycode=' + record.data.GDSTREECODE})
		}
	}
});

var sTown = new Ext.form.ComboBox({
	fieldLabel:'乡镇',
	xtype:'combo',
	name:'STOWN',
	hiddenName:'STOWN',
	anchor:'100%',
	triggerAction:'all',
	mode:'local',
	editable:false,
	allowBlank:false,
	disabled:false,
	display:true,
	emptyText:'请选择一项...',
	store:townStore,
	valueField:'GDSTREECODE',
	displayField:'GDSTITLE',
	listeners:{
		'select':function(thiz,record,index){
			villageStore.removeAll();
			sVillage.clearValue();
			villageStore.proxy=new Ext.data.HttpProxy({url:CONTEXT_PATH + 'findVillage.action?casetowncode=' + record.data.GDSTREECODE})
		}
	}
});

var sVillage = new Ext.form.ComboBox({
	fieldLabel:'村',
	xtype:'combo',
	name:'SVILLAGE',
	hiddenName:'SVILLAGE',
	anchor:'100%',
	triggerAction:'all',
	mode:'local',
	editable:false,
	allowBlank:false,
	disabled:false,
	display:true,
	emptyText:'请选择一项...',
	store:villageStore,
	valueField:'GDSTREECODE',
	displayField:'GDSTITLE'
});

然后是给ComboBox赋值的Store，

var countyStore = new Ext.data.JsonStore({
	autoLoad:true,
	proxy:new Ext.data.HttpProxy({url:CONTEXT_PATH + 'findQx.action'}),//代理方法请求的路径
	filds:['GDSTREECODE','GDSTITLE']//要给下拉框赋值的字段
});

var townStore = new Ext.data.JsonStore({
	autoLoad:true,
	proxy:new Ext.data.HttpProxy({url:CONTEXT_PATH + 'findTown.action'}),
	filds:['GDSTREECODE','GDSTITLE']
});

var villageStore = new Ext.data.JsonStore({
	autoLoad:true,
	proxy:new Ext.data.HttpProxy({url:CONTEXT_PATH + 'findVillage.action'}),
	filds:['GDSTREECODE','GDSTITLE']
});

    最后就是定义一个Form，把 相应的控件放到Form中。Form中的按钮和text框都是可拆卸的，可以写在Form里面，也可以像ComboBox一样另外定义，然后组装到Form中去。

var staffForm = new Ext.FormPanel({
	labelWidth:85,
	url:'save-form.php',
	fileUpload:true,
	frame:true,
	defaultType:'textfield',
	items:[
		{
			fieldLabel:'主键',
			name:'SID',
			anchor:'100%',
			xtype:'hidden'
		},
		{
			fieldLabel:'姓名',
			name:'SNAME',
			anchor:'100%',
			allowBlank:false
		},
		{
			fieldLabel:'电话号码',
			name:'PHONENUM',
			anchor:'100%',
			allowBlank:false
		},
		{
			fieldLabel:'职位',
			name:'POST',
			anchor:'100%',
			allowBlank:false
		},
		sLevel,
		{
			fieldLabel:'单位',
			name:'SUNIT',
			anchor:'100%',
			allowBlank:false
		},
		sCounty,
		sTown,
		sVillage,
		{
			fieldLabel:'行政区划编码',
			name:'SREGIONCODE',
			anchor:'100%',
			allowBlank:false
		}
	],
	buttonAlign:'center',
	buttons:[
		{
			text:'保存',
			handler:addStaff
		},
		{
			text:'取消',
			handler:function(){
				win.hide();
			}
		}
	]
});

        这样一个Form就组装完了，那么这个Form应该怎么显示呢？我们平常系统中，经常用到的是点击添加按钮弹出一个Dialog框，然后表单显示在这个Dialog里面，那就是说表单得需要这么一个容器。在ExtJS里面，这个就由Window代替了。

var win = new Ext.Window({
	title:'编辑窗口',
	contentEl:'staffFormWin',//对应页面中盛放这个Window的div的id
	closeAction:'hide',
	width:550,
	height:320,
	plain:true,
	layout:'fit',
	modal:true,
	items:[staffForm]//把表单放到window中来
});

使用时只需要点击某个按钮，让win.show()就可以了，怎么样，是不是很简单？