ExtJs formPanel(二、表單提交和取值)
阿新 • • 發佈:2019-02-01
在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); });