关于对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();   
  });