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()就可以了，怎么样，是不是很简单？