前言
系统页面基本离不开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'
});
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']
});
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()就可以了,怎么样,是不是很简单?