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




你可能感兴趣的:(FormPanel)