您的位置:首页 > Web前端 > JavaScript

ExtJs formPanel(二、表单提交和取值)

2012-07-29 14:33 387 查看
在Ext中FormPanel并中并不保存表单数据,其中的数据是由BasicForm保存,在提交表单的时候需要获取当前FormPanel中的BasicForm来进行提交. 
 在获取BasicForm对象后便可进行表单的提交操作... 
此时需要查一下BasicForm 的API文档,
1.首先取值可以通过findField方法来寻找name,等还可以使用其它方法

simple.getForm().findField('first').getValue();


2.给FormPanel赋值:

myform.getForm().setValues({first:'s',second:'1',date:new Date()});

myform.getForm().loadRecord(record);
注:赋值时要对应store中里面列的名字一致,比如说你可以通过BasicForm中的loadRecord(record)来赋值,特别是在(grid与form结合中),form里面中的Item项name值与store中列名相同.

上面代码中setValues()中直接赋对象,名字也是要与store一一对应

一般提交表单你可以用BasicForm中的doAction(),也可以用Ext.ajax.request(),
以下是一个form例子:

Ext.onReady(function(){
//	Ext.form.Field.prototype.msgTarget = 'side';
//
var bd = Ext.getBody();
bd.createChild({tag: 'h2', html: 'form'});//在body中创建一个标签

var simple = new Ext.FormPanel({
labelWidth: 75,
//        url:'save-form.php',
frame:true,
title: 'Simple Form',
bodyStyle:'padding:5px 5px 0',//设置容器样式
width: 350,
defaults: {width: 230},
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
id:'fristId',
allowBlank:false
},{
fieldLabel: 'Last Name',
name: 'last'
},{
fieldLabel: 'Company',
name: 'company'
}, {
fieldLabel: 'Email',
name: 'email',
vtype:'email'
}, new Ext.form.TimeField({
fieldLabel: 'Time',
name: 'time',
minValue: '8:00am',
maxValue: '6:00pm'
}),{
name:'sex',
fieldLabel:'性别',
hiddenName:"sex",
xtype:'combo',
displayField:'name',
valueField:'id',
triggerAction:'all',
mode:'local',
store:new Ext.data.ArrayStore({
fields:["id","name"],
data:[[1,"男"],[2,"女"]]
})
}
],
buttons: [{
text: '取值',
handler:function(){
//            	var first=simple.findById('fristId').getValue();
//            	var first=simple.getForm().findField('first').getValue();//取名字
//            	var first=simple.getComponent('fristId').getValue();//取Id
//            	alert(first);
var bacform=simple.getForm();

//            	alert(bacform.findField('sex').getValue());//1

/*    	Ext.Ajax.request({
url:'/My_ExtJs/Login-login.action',
params:{'deptno':bacform.getValues().first},
method:'POST',
success:function(){
alert(1);
}
});*/
bacform.doAction('submit', {
url:'/My_ExtJs/Login-login.action',
params:{'deptno':bacform.getValues().first},
method:'POST',
waitMsg:'正在登陆...',
success:function(form,action){
var isSuc = action.result.success;
if(isSuc) {
//提示用户登陆成功
Ext.Msg.alert('消息', '登陆成功..');
}
}
});
}
},{
text: '重置',
handler:function(){
simple.getForm().reset();
}
}]
});
//simple.addButton([{text:'save'},{text:'cancel'}]);
simple.render(document.body);
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息