关于对ExtJs中FormPanel,BasicForm的理解

最近正在用ExtJs2.2开发项目的UI，至于为何要用ExtJs开发这个就不说了，看了官方的demo就知道了。由于对JS不是很

熟，开发中遇到了不少的问题，在此也要感谢网上那些无私奉献的朋友们，正是有了你们，才坚定了学习ExtJs的信心。

为了自身查阅方便，也为了给网友们一些参考，写点文章。有错误的地方，还请各位大侠指正。

//loginForm为FormPanel

var formValues1= Ext.getCmp("loginForm").getForm().getValues(false);//返回表单字段数组对象

var formValues2 = Ext.getCmp("loginForm").getForm().getValues(true);//返回表单字符串

alert(formValues2.userNo);//返回表单中字段为userNo的值

alert(formvalues2);//返回表单字段的键值对，字段间以&隔开

 

给表单第一个字段设置焦点：

如果是window

listeners: { 'show': function() { this.findByType('textfield')[0].focus(true, true); //第一个textfield获得焦点 } },

如果是formpanel可以加如下代码

listeners : { 'render' : function() { this.findByType('textfield')[0].focus(true, true); //第一个textfield获得焦点 } },

都蛮好用的。

 

隐藏标签：

{ xtype: 'textfield', name: 'FID', id: 'FID', hidden: true, hideLabel:true }] }); 只需将textfield的hidden和hideLabel配置为true就可以了。只设置hidden:true时会显示出来一个：的标签。 

 

ExtJs form Ajax提交：

function login() {     Ext.QuickTips.init();     // Ext.Msg.alert("系统提示","login.js is here");     var loginForm = new Ext.form.FormPanel({         id : 'loginForm',         baseCls : 'x-plain',         plain : true,         defaults : {             anchor : '95%'         },         defaultType : 'textfield',         items : [{             id : 'userNoFromKey',             name : 'userNoFromKey',             hidden : true,             hideLabel : true         }, {             id : 'userNo',             name : 'userNo',             fieldLabel : '用户名',             blankText : "用户名不能为空!",             allowBlank : false         }, {             id : 'pwdFromKey',             name : 'pwdFromKey',             hidden : true,             hideLabel : true         }, {             id : 'password',             name : 'password',             fieldLabel : '密   码',             inputType : 'password',             blankText : "密码不能为空!",             allowBlank : false         }, {             id : 'serialIdFromKey',             name : 'serialIdFromKey',             hidden : true,             hideLabel : true         }         ]     });     var loginWin = new Ext.Window({         title : '一卡通系统登录页面',         width : 500,         height : 180,         items : loginForm,         plain : true,         bodyStyle : 'padding:5px;',         buttonAlign : 'center',         layout : 'fit',         buttons : [{             text : '登录',             handler : submitForm         }, {             text : '重置',             handler : resetForm         }],         listeners : {             'show' : function() {                 this.findByType('textfield')[0].focus(true, true); // 第一个textfield获得焦点             }         }     });     function submitForm() {         //alert("submit...");         var form = Ext.getCmp("loginForm").getForm();         if (form.isValid()) {             //alert("isvalid");             form.submit({                 url : 'login.do?method=login',                 method : 'POST',                 success:function(form,action)                             {                                 var isSucc = action.result.success;                                 if(isSucc)                                 {                                                                            var forward = action.result.data;                                      //alert(forward);                                      window.location.href=forward;                                 }                                 else                                 {                                                                          Ext.Msg.alert("系统提示", "用户登录失败");                                 }                             },                             failure : function(form, action) {                                 Ext.Msg.alert("系统提示", "用户登录失败");                             }             });         }     }     function resetForm() {         alert("reset...");         Ext.getCmp("loginForm").getForm().reset();     }     loginWin.show(); } Ext.onReady(login);

 

ExtJs 的form默认采用Ajax提交，如果必须采用普通form提交，则必须实现

    var myForm = new Ext.form.FormPanel({         onSubmit: Ext.emptyFn,         submit: function() {             this.getForm().getEl().dom.submit();         }     });//来自API解释

代码如下：

Ext.onReady(function()   {        Ext.QuickTips.init();        var form1 = new Ext.form.FormPanel({        baseCls : 'x-plain',        renderTo:"loginForm", //要渲染的div        labelWidth: 75, // label settings here cascade unless overridden        method:'POST',               bodyStyle:'padding:5px 5px 0',        width: 400,        defaults: {width:300},        defaultType: 'textfield',        //实现非AJAX提交表单一定要加下面的两行！        onSubmit: Ext.emptyFn,        submit: function()        {            this.getEl().dom.action= 'index.jsp'; //连接到服务器的url地址            this.getEl().dom.submit();        },               items: [{            fieldLabel: '用户名',            id: 'username',            name: 'name',              allowBlank:false,            blankText : "用户名不能为空",            width:360            },{            fieldLabel: '密码',            blankText : "密码不能为空",            id: 'password',            name: 'pwd',            allowBlank:false,            minLength : 6,            width:360,            inputType:'password' //类型为password        }        ],        buttons: [{            text: '登录',            type:'button',            id:'login',            handler: function()            {                    //表单验证通过                    if (form1.form.isValid())                    {                           //提交form                        form1.form.submit();                    }               }        },{            text: '重置',            type:'reset',            id:'clear',            handler: function()            {                 form1.form.reset();            }        }        ]        });         //将form添加window中     var window = new Ext.Window({         title: '用户登录',         width:500,         height:200,         layout: 'fit',         plain:true,         bodyStyle:'padding:5px;',         buttonAlign:'center',         items: form1     });     //显示window     window.show();      });