Ext form
Ext中创建Form有两种方式，一种是使用Ext.form.BaseForm，另一种是使用Ext.form.FormPanel。
1 使用Ext.form.BaseForm封装HTML原生的form：
jsp页面：
<form id="queryForm" action="" >
<table cellpadding="2" cellspacing="1" >
<tr>
<td> 物料编码：</td>
<td><input type="text" id="marcNo" style="width: 180px;"></td>
<td> 品名：</td>
<td><input type="text" id="marcName" style="width: 100px"></td>
<td> 创建时间：</td>
<td><input id="startDate" type="text" name="startDate" style="width: 85px" ></td>
<td style="text-align: center;">至</td>
<td style="text-align: left;"><input id="endDate" type="text" name="endDate" style="width: 85px" ></td>
</tr>
<tr>
<td> 物料描述：</td>
<td><input type="text" id="marcDesc" style="width: 180px"></td>
<td> 状态：</td>
<td>
<select id="statusRmk" name="statusRmk">
<option value="">请选择</option>
<option value="1">正常使用</option>
<option value="2">冻结状态</option>
<option value="3">删除</option>
</select>
</td>
<td> 类别：</td>
<td>
<select id="marcKind" name="marcKind">
<option value="">请选择</option>
<option value="1" >类别1</option>
<option value="2" >类别2</option>
<option value="3" >类别3</option>
</select>
</td>
<td colspan="2" style="text-align: right;padding-left: 5px;">
<div id="toolBar"></div>
</td>
</tr>
</table>
</form>
js代码
<script>
var queryForm,marcNo,marcDesc,marcName,statusRmk,marcKind,startDate,endDate;
/**
* 初始化ext Form
*/
function initForm(){
//物料编码
marcNo = new Ext.form.TextField({
applyTo: 'marcNo',
name: 'marcNo',
allowBlank: true,
maxLength: 20,
width: 180,
enableKeyEvents: true,
listeners: {
keyup: function(diviNo,e){
marcNo.setValue(marcNo.getValue().toUpperCase());
}
}
});
//物料描述
marcDesc = new Ext.form.TextField({
applyTo: 'marcDesc',
name: 'marcDesc',
allowBlank: true,
maxLength: 100,
width: 180
});
//品名
marcName = new Ext.form.TextField({
applyTo: 'marcName',
name: 'marcName',
allowBlank: true,
maxLength: 100,
width: 100
});
//状态
statusRmk = new Ext.form.ComboBox({
transform: 'statusRmk',
name: 'statusRmk',
hiddenName: 'statusRmk',
typeAhead: true,
mode: 'local',
editable: false,
allowBlank: true,
triggerAction: 'all',
selectOnFocus: true,
width: 100
});
//类别
marcKind = new Ext.form.ComboBox({
transform: 'marcKind',
name: 'marcKind',
hiddenName: 'marcKind',
typeAhead: true,
mode: 'local',
editable: false,
allowBlank: true,
triggerAction: 'all',
selectOnFocus: true,
width: 85
});
//时间段-开始时间
startDate = new Ext.form.DateField({
id: 'startDate',
applyTo: 'startDate',
name: 'startDate',
allowBlank: true,
width: 85,
format: 'Y/m/d',
invalidText: '{0}不符合{1}的格式要求!',
vtype: 'daterange',
endDateField: 'endDate',
altFormats: 'Y/m/d'
});
//时间段-结束时间
endDate = new Ext.form.DateField({
id: 'endDate',
applyTo: 'endDate',
name: 'endDate',
allowBlank: true,
width: 85,
format: 'Y/m/d',
invalidText: '{0}不符合{1}的格式要求!',
listeners: {
},
vtype: 'daterange',
startDateField: 'startDate',
altFormats: 'Y/m/d'
});
queryForm = new Ext.form.BasicForm('queryForm'); //创建Form对象
queryForm.add(marcNo,marcDesc,marcName,statusRmk,marcKind,startDate,endDate); //添加元素
}
</script>
2 使用Ext.form.FormPanel：
jsp代码：
<!-- 用户类型 -->
<select id="userKind" name="userKind">
<erpit:options key="USER_KIND" selectVal="${wuser.userKind}"></erpit:options>
</select>
js代码
//制定form表单各个子项
var userId=new Ext.form.Hidden({
id : 'userId',
name:'userId',
value:'<c:out value="${wuser.id}" />'
});
var userNo=new Ext.form.TextField({
id : 'userNo',
name:'userNo',
fieldLabel :'帐 号',
value:'<c:out value="${wuser.userNo}" />',
allowBlank: false,
maxLength:20,
listeners :{
blur :function(userNo){
userNo.setValue(userNo.getValue().toUpperCase());
}
}
});
var userPassword=new Ext.form.TextField({
id : 'userPassword',
name:'userPassword',
fieldLabel :'密 码'
});
var email=new Ext.form.TextField({
id : 'email',
name:'email',
fieldLabel :'电子邮件',
allowBlank: false,
value:'<c:out value="${wuser.email}" />',
maxLength:20,
vtype:'email'
});
var memo=new Ext.form.TextArea({
id : 'memo',
name:'memo',
fieldLabel :'备 注',
value:'<c:out value="${wuser.memo}" />',
width:400,
height:100
});
var userKind=new Ext.form.ComboBox({
transform:'userKind',
id:'userKind',
valueField:'no',
fieldLabel :'用户类别',
displayField:'desc',
typeAhead: true,
mode: 'local',
editable: true,
allowBlank: false,
triggerAction: 'all',
selectOnFocus: true
});
//制定form表单
var centerForm = new Ext.form.FormPanel({
id:'centerForm',
frame:true,
labelAlign:'right',
layout:'form',
labelWidth:80,
items:[userId,userNo,perNo,userName,userPassword,email,tel,userKind,memo]
});
3 Ext form加载Record中的数据：form.loadRecord(record);采用此方法可以实现grid行中的数据与form关联。
4 Ext form提交
（1）采用Ext.Ajax.request提交
Ext.Ajax.request({
url: '<c:out value="${path}" />/wcolm.htm?method=saveData',
params: {
colId :colmId.getValue(), //Ext form组件
detailData:Ext.encode(dataArr)
},
success: function(response, options){
var rtnObj = Ext.util.JSON.decode(response.responseText);
if(rtnObj.success){
yyExt.info('系統提示',"资料保存成功!");
}else{
yyExt.alert("系统提示","保存资料出错,"+unescape(rtnObj.info),"ERROR");
}
},
failure: function(response, options){
var rtnObj = Ext.util.JSON.decode(response.responseText);
yyExt.alert("系统提示","保存资料出错,"+unescape(rtnObj.info),"ERROR");
return false;
}
});
（2）采用Ext BaseForm的 submit方法
if(centerForm.isValid()){
centerForm.submit({
method:"post",
url: '<c:out value="${path}" />/user.htm?method=userSave',
params:{
'data':Ext.encode(centerForm.getValues()), //这里后台取值 需要解析datajson字符串
'diviIds':indexFun.getAllDiviId(),
'roleIds':indexFun.getAllRoleId()
},
waitMsg:'Loading...',
failure:function(form,action){
if(action.result==null){
Ext.Msg.alert('提示',"保存失败");
}else{
Ext.Msg.alert('保存失败',action.result.info);
}
},
success: function(form,action){
yyExt.info("提示","操作成功");
}
});
}