`
cjh820425
  • 浏览: 155392 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

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

 

 

 

 

分享到:
评论
1 楼 lpyhy520 2011-07-05  
handler: function()
           {
                   //表单验证通过
                   if (form1.form.isValid())
                   {   
                       //提交form
                       form1.form.submit();
                   }   
           }



form1.form.isValid()为false怎么解决啊?

相关推荐

    extjs4如何给同一个formpanel不同的url_.docx

    总之,EXTJS4中的FormPanel结合BasicForm,为我们提供了一种灵活的方式来处理表单的提交。通过动态设置BasicForm的URL,我们可以实现同一个FormPanel实例根据不同的需求提交到不同的服务器端接口,提高了代码的可...

    ExtJS4如何给同一个formpanel不同的url

    在ExtJS4中,FormPanel是一个非常常用的组件,用于创建包含表单元素的用户界面。然而,有时我们可能需要在同一个FormPanel实例中为不同的操作指定不同的提交URL。标题和描述提到的问题,实际上涉及到如何动态地改变...

    extJs 常用到的增,删,改,查操作代码

    首先,我们要明白,在ExtJs中,增删改查通常是通过与后端服务(如Java后端)进行通信来实现的,ExtJs本身提供了丰富的组件,让我们可以方便地创建表单,发起请求,并对服务器返回的结果进行处理。 在描述中提到的...

    ExtJs实现数据加载和提交经典代码

    根据提供的文件信息,我们可以深入探讨如何在ExtJS中利用FormPanel进行数据加载和提交的核心概念与实践技巧。 ### FormPanel的Form对象 在ExtJS框架中,`FormPanel`是处理表单数据的一个核心组件。当我们在使用`...

    extjs属性方法大全

    以上是 `Extjs` 中常用的表单类及其属性和方法的详细介绍,这些类和方法提供了丰富的功能,帮助开发者快速构建功能完备的 Web 表单应用。通过掌握这些基础知识,可以有效地提高开发效率并确保应用程序的质量。

    深入浅出ExtJS第2版

    深入浅出ExtJS第2版+源码..1 下载EXT发布包 1 1.2 如何查看EXT自带的API和示例 1 ...4.2 FormPanel和BasicForm详解 77 4.3 EXT支持的控件 77 4.3.1 控件继承图 77 4.3.2 表单控件 78 4.3.3 基本输入控

    extjs-form组件配置参数详解

    - **params**: 传递到请求中的额外参数,可以是键值对的形式。 - **url**: 动作提交的目标URL。 - **waitMsg**: 动作执行时显示的等待信息,用于提升用户体验。 **属性** - **Action.CLIENT_INVALID**: 客户端验证...

    Extjs 词语定义

    在本文中,我们将深入探讨 `Ext.form` 模块中的 `Action` 和 `BasicForm` 类,以及 `FormPanel` 组件,这些都是EXTJS中处理表单操作的关键概念。 1. **Ext.form.Action** - `success` 和 `failure` 回调函数:这两...

    Extjs学习笔记之二 初识Extjs之Form

    在本篇Extjs学习笔记中,我们将深入探讨Extjs中的Form,特别是其封装的Ext.form.BasicForm和Ext.form.FormPanel。 首先,Extjs中的表单组件主要基于Ext.form.BasicForm,这是一个基础的表单对象,负责处理表单数据...

Global site tag (gtag.js) - Google Analytics