`
nieli
  • 浏览: 82845 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

一个比较完整的Ext注册表单例子

    博客分类:
  • Ext
阅读更多

转自:http://www.tech-q.cn/thread-276-1-1.html

var  registerForm = new Ext.form.FormPanel  
  ({  
    frame : true,  
    title : '注册新用户',  
    labelSeparator : ':',  
    labelWidth : 150,  
    width : 200,  
    height : 600,  
    waitMsgTarget: true, /*  true的意思是说表单提交时的等待信息在这个表单之内显示,而不是弹出框 */ 
    items : [  
    {  
        xtype : "textfield",  
        name : 'UserName',  
        id: 'UserName',  
        allowBlank : false,  
        blankText : '注册用户名不能为空',  
        regex : /^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){5,11}$/,  
        regexText : '用户名不合法(必须以字母开头,长度6-12位)!',//验证错误之后的提示信息  
        fieldLabel : '登录名',  
        emptyText : '填写用户名',  
        invalidText : '用户名已经被注册!',  
        width : 250,  
        validationEvent : 'blur',  
        validator : function(thisText) {  
              var res  
              Ext.Ajax.request  
                ({  
                    url : '/portal/Member.do?method=ajaxCheckUserName&UserName='+thisText,  
                    method : 'post',  
                    success : function(response,options)  
                    {  
                  var res = Ext.util.JSON.decode(response.responseText);  
                  if(res.success == true)  
                  {     
                           
                          isok=true;  
                  }  
                  else 
                  {   
                          isok=false;  
                  }  
                 
                  }  
                });  
           
       
            return isok;  
        }  
    },  
    {  
        xtype : "textfield",  
        name : 'PassWord',  
        id : 'PassWord',  
        width : 250,  
        fieldLabel : '输入登录密码',  
        allowBlank : false,  
        inputType : 'password',  
        emptyText : '填写登录密码',  
        blankText : '登录密码不能为空' 
 
    },  
    {  
        xtype : "textfield",  
        name : 'RePassWord',  
        id : 'RePassWord',  
        width : 250,  
        allowBlank : false,  
        fieldLabel : '再次输入密码',  
        emptyText : '填写重复密码',  
        blankText : '重复密码不能为空',  
        vtype : 'password',  
        inputType : 'password',  
        initialPassField : 'PassWord' 
    }, new Ext.form.ComboBox({  
                id : 'Question',  
                name : 'Question',  
                fieldLabel : '请选择密码问题',  
                triggerAction : 'all',  
                editable : false,  
                store : questionstore,  
                emptyText : '请选择',  
                displayField : 'qu',  
                valueField : 'qu',  
                mode : 'local',  
                anchor : '40%',  
                allowBlank : false,  
                blankText : '密码问题不能为空',  
                forceSelection : true,  
                resizable : true,  
                typeAhead : true 
            }),  
 
    {  
        xtype : "textfield",  
        id:  'Answer',  
        name : 'Answer',  
        fieldLabel : '请输入密码问题答案',  
        width : 250,  
        emptyText : '密码问题答案',  
        allowBlank : false,  
        blankText : '密码问题答案不能为空' 
 
    },  
 
    new Ext.form.ComboBox({  
                id : 'RoleType',  
                name : 'RoleType',  
                displayField : 'roleType',  
                fieldLabel : '用户类型',  
                triggerAction : 'all',  
                valueField : 'value',  
                mode: 'local',  
                editable : false,  
                emptyText : '请选择',  
                mode : 'local',  
                anchor : '60%',  
                store : roleTypeStore,  
                allowBlank : false,  
                blankText : '用户类型不能为空',  
                forceSelection : true,  
                resizable : true,  
                typeAhead : true,  
                listeners : {  
                    select : function(form, record, index) {  
                        var store;  
                        getId=record.get('value');  
                        if (record.get('value') == 'f') {  
                            store = familyStore;  
                        } else if (record.get('value') == 'u') {  
                            store = unitStore;  
 
                        } else if (record.get('value') == 'e') {  
                            store = expertStore;  
 
                        } else if (record.get('value') == 'c') {  
                            store = consumerStore;  
 
                        } else if (record.get('value') == 's') {  
                            store = stuffStore;  
 
                        }  
                        registerForm.getForm().findField('AccountType')  
                                .clearValue();  
                        registerForm.getForm().findField('AccountType').store = store;  
 
                        if (registerForm.getForm().findField('AccountType').view) {  
                            registerForm.getForm().findField('AccountType').view  
                                    .setStore(store);  
                        }  
                        registerForm.getForm().findField('AccountType')  
                                .enable();  
 
                    }  
                }  
            }),  
 
    new Ext.form.ComboBox({  
                id : 'AccountType',  
                name : 'AccountType',  
                displayField : 'accountType',  
                valueField : 'value',  
                name : 'AccountType',  
                fieldLabel : '帐户类型',  
                triggerAction : 'all',  
                editable : false,  
                emptyText : '请选择',  
                mode : 'local',  
                anchor : '80%',  
                allowBlank : false,  
                blankText : '密码问题不能为空',  
                forceSelection : true,  
                resizable : true,  
                typeAhead : true 
            }),  
      new Ext.form.TextArea({  
                name : 'Summary',  
                id : 'Summary',  
                fieldLabel : '概述或欢迎辞',  
                width : 300  
            }),  
    {  
        xtype : "textfield",  
        id : 'Email',  
        name : 'Email',  
        fieldLabel : 'E-mail',  
        emptyText : '请输入E-mail(电子邮箱)',  
        allowBlank : false,  
        width : 250,  
        blankText : 'E-mail(电子邮箱)不能为空',  
        regex : /^([\w]+)(.[\w]+)*@([\w-]+\.){1,5}([A-Za-z]){2,4}$/,  
        regexText : '电子邮件格式错误!'//验证错误之后的提示信息  
    }, {  
        xtype : "textfield",  
        id : 'Mobile',  
        name : 'Mobile',  
        fieldLabel : '移动电话',  
        width : 250,  
        regex : /^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/,  
        regexText : '移动电话号码格式输入错误!' 
 
    }, {  
        xtype : "textfield",  
        id : 'Telephone',  
        name : 'Telephone',  
        fieldLabel : '电话号码',  
        width : 250,  
        regex : /^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/,  
        regexText : '电话号码格式输入错误!' 
    }],  
    buttons : [{  
                text : '注册',  
                handler : registerSubmit  
            }]  
           
   
           
});

分享到:
评论

相关推荐

    Ext3.0的个人笔记及例子

    Ext3.0的个人笔记及例子,包括按钮,表单及验证,panel,window,TabPanel,treePanel,formPanel,gridPanel,viewPort等主要控件

    ext学习小例子

    ext入门学习例子,包含页面布局,树,列表显示,查询表单等。

    EXT例子网格;树等等;都有

    里面包含了一些EXT实现的表单;网格;树;后台交互等等!是一个不错的例子

    extjs4的Ext.frorm.Panel控件属性说明和表单控件说明

    主要用例子说明extjs4的form表单的运用,其中有表单属性说明,表单控件运用说明如: title:'表单', //表单标题 bodyStyle:'padding:5 5 5 5', //表单边距 height:120, //表单高度 width:200, //表单宽度 ...

    G4Studio_V3.0 Ext非常详细的例子

    在网上找到的开源extjs技术资料,可以当做ext开发的百科全书来用,最重要的是每一个小东西都有非常完整的例子

    Ext.ux.submit的例子

    基于Ext Core的包含校验功能的表单提交扩展Ext.ux.submit

    EXT2.0中文教程

    5.3.3. 下一个例子是进度条 5.3.4. 动画效果,跳出来,缩回去 5.4. 让弹出窗口,显示我们想要的东东,比如表格 5.4.1. 2.0的弹出表格哦 5.4.2. 向2.0的window里加表格 5.4.3. 1.x里的叫做BasicDialog 5.4.4. 把form...

    extjs表单提交例子

    console.log("表单数据:" + Ext.encode(formData)); Ext.getCmp("msgBasicMsg").getForm().submit({ url : 'insertMsg.action?msgBean=' + formData, //等待时显示 等待 waitTitle : '请稍等...', waitMsg : '...

    Ext简单例子

    在Ext中一些表单控件的使用

    Ext 开发指南 学习资料

    5.3.3. 下一个例子是进度条 5.3.4. 动画效果,跳出来,缩回去 5.4. 让弹出窗口,显示我们想要的东东,比如表格 5.4.1. 2.0的弹出表格哦 5.4.2. 向window里加表格 5.4.3. 把form放进对话框里 6. 奔腾吧!让不同的...

    EXT2_combobox_form.rar_combobox ext_ext

    ext关于form表单和combobox的例子

    EXT教程EXT用大量的实例演示Ext实例

    5.3.3. 下一个例子是进度条 5.3.4. 动画效果,跳出来,缩回去 5.4. 让弹出窗口,显示我们想要的东东,比如表格 5.4.1. 2.0的弹出表格哦 5.4.2. 向2.0的window里加表格 5.4.3. 1.x里的叫做BasicDialog 5.4.4. ...

    Ext 学习中文手册

    为一个表单填充或提交数据 69 让我们开始吧 69 读取我们的数据 71 EXT中的继承 71 补充资料 73 Ext 2 概述 73 组件模型 Component Model 74 容器模型Container Model 78 布局 Layouts 80 Grid 82 XTemplate 83 ...

    掏钱学Ext(完整版) 附全部源码

    5.3.3. 下一个例子是进度条 5.3.4. 动画效果,跳出来,缩回去 5.4. 更进一步撒。 6. 奔腾吧!让不同的浏览器里显示一样的布局。 6.1. 有了它,我们就可以摆脱那些自称ui设计师的人了。 6.2. 关于...

    EXT2.0 简明教程!(chm)

    把表单和输入控件都改成ext的样式。 第 5 章 雀跃吧!超脱了一切的弹出窗口。 第 6 章 奔腾吧!让不同的浏览器里显示一样的布局。 第 7 章 低鸣吧!拖拽就像呼吸一样容易。 第 8 章 哭泣吧!现在才...

    EXT 中文帮助手册

    将数据加入到模板中 62 下一步 63 学习利用模板(Templates)的格式化功能 63 正式开始 63 下一步 64 事件处理 64 非常基础的例子 64 处理函数的作用域 64 传递参数 65 类设计 66 ...

    Ext Js权威指南(.zip.001

    2.9 为本书示例准备一个模板 / 60 2.10 本章小结 / 61 第3章 调试工具及技巧 / 62 3.1 使用firebug进行调试 / 62 3.2 在ie中调试 / 76 3.2.1 使用debugbar和companion.js调试 / 76 3.2.2 使用ietester测试 / ...

    EXT简体中文参考手册(PDF&CHM电子档)

    为一个表单填充或提交数据 69 让我们开始吧 69 读取我们的数据 71 EXT中的继承 71 补充资料 73 Ext 2 概述 73 组件模型 Component Model 74 容器模型Container Model 78 布局 Layouts 80 Grid 82 XTemplate 83 ...

    ext实例 左边是 tree 右边是grid 双击grid弹出form修改

    非常珍贵的初学者资源,详细的使用了ext的各种常用组件和类库,例子完完整整,能运行,数据库资源直接在配置文件里面写就行,是那种就换成什么,非常方便大家使用和参考。

    完成的 Ajax 提交表单

    该例子是使用 Ajax 提交 Ext 表单,并通过 success 和 failer 返回相应的值。

Global site tag (gtag.js) - Google Analytics