1. 程式人生 > >ExtJs formPanel(二、表單提交和取值)

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

在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);
});