EXT4.1表单提交(非AJAX)

来源：互联网发布：怎样开淘宝旗舰店编辑：程序博客网时间：2024/05/01 07:53
Ext.require([    'Ext.form.*',    'Ext.data.*']);Ext.onReady(function(){Ext.apply(Ext.form.VTypes, {       repetition: function(val, field) {     //返回true，则验证通过，否则验证失败           if (field.repetition) {               //如果表单有使用repetition配置，repetition配置是一个JSON对象，该对象提供了一个名为targetCmpId的字段，该字段指定了需要进行比较的另一个组件ID。               var cmp = Ext.getCmp(field.repetition.targetCmpId);   //通过targetCmpId的字段查找组件               if (Ext.isEmpty(cmp)) {      //如果组件（表单）不存在，提示错误                   Ext.MessageBox.show({                       title: '错误',                       msg: '发生异常错误，指定的组件未找到',                       icon: Ext.Msg.ERROR,                       buttons: Ext.Msg.OK                   });                   return false;               }               if (val == cmp.getValue()) {  //取得目标组件（表单）的值，与宿主表单的值进行比较。                   return true;               } else {                   return false;               }           }       },       repetitionText: '两次输入的密码不一样'   });    Ext.define('example.contact', {        extend: 'Ext.data.Model',        fields: [            'name','stuid','password','password2','tel',            'sex','qq', 'email', 'grade_class',            {name: 'birthday', type: 'date', dateFormat: 'm/d/Y'}        ]    });    Ext.define('example.fielderror', {        extend: 'Ext.data.Model',        fields: ['id', 'msg']    });    var formPanel = Ext.create('Ext.form.Panel', {        renderTo: 'form-ct',        url:'admin/userRegister', //如果要实现非AJAX表单提交就在这里加url        collapsible:true,                method:'POST',        frame: true,        title:'注册',        width: '30%',//        left:1300,        bodyPadding: 5,        waitMsgTarget: true,        fieldDefaults: {            labelAlign: 'right',            labelWidth: 85,            msgTarget: 'side'        },        // configure how to read the XML data        reader : Ext.create('Ext.data.reader.Xml', {            model: 'example.contact',            record : 'contact',            successProperty: '@success'        }),        // configure how to read the XML errors        errorReader: Ext.create('Ext.data.reader.Xml', {            model: 'example.fielderror',            record : 'field',            successProperty: '@success'        }),      //实现非AJAX提交表单一定要加下面的两行！   下面的方法只适用于2.0版本//        onSubmit: Ext.emptyFn,//        submit: function() {//        this.getEl().dom.action='admin/userRegister'; //连接到服务器的url地址//        this.getEl().dom.submit();//        },        items: [{            xtype: 'fieldset',                        title: 'Information',            defaultType: 'textfield',            defaults: {                width: 280            },            items: [{                    fieldLabel: '姓名',                    allowBlank:false,                    blankText :'请输入您的姓名',                    emptyText: '请输入您的姓名',                    name: 'name'                },                {                    fieldLabel: '学号',                    allowBlank:false,                    blankText :'请输入您的学号',                    emptyText: '请输入您的学号',                    regex:/\d{9}$/,                    vtype:'alphanum',                    name: 'stuid'                },                                {                inputType: 'password',                      id: 'password',                      name:'password',                    maxLength: 15,                      fieldLabel: '输入密码',                      vtype:'alphanum',                    allowBlank: false                  },                {                inputType: 'password',                      id: 'password2',                      name:'password2',                    maxLength: 15,                      fieldLabel: '重复密码',                      allowBlank: false,                      vtype: 'repetition',  //指定repetition验证类型                      repetition: { targetCmpId: 'password' }  //配置repetition验证，提供目标组件（表单）ID                  },                {                    fieldLabel: '电话',//                    minLength:11,//                    maxLength:11,                    allowBlank:false,                    blankText :'请输入合法的电话号码',                    emptyText: '请输入您的电话',                    regex:/\d{11}$/,                    vtype:'alphanum',                    name: 'tel'                },                 {xtype: 'combobox',                    fieldLabel: '性别',                    allowBlank:false,                    blankText :'你没有性别？？！',                                        name: 'sex',                    store: Ext.create('Ext.data.ArrayStore', {                        fields: ['usex', 'sex'],//                        data : Ext.example.states // from states.js                        data:[['01','男'],['02','女'],['03','为什么会有这个选项...']                              ]                      }),                    valueField: 'usex',                    displayField: 'sex',                    typeAhead: true,                    queryMode: 'local'                                    },                {                    fieldLabel: 'qq',                    allowBlank:false,                    minLength:5,                    maxLength:10,                    blankText :'请输入合法的QQ号码',                    emptyText: '请输入您的QQ',                    vtype:'alphanum',                    name: 'qq'                },                 {                    fieldLabel: 'Email',                    blankText :'请输入您的邮箱',                    allowBlank:false,                    name: 'email',                    vtype:'email'                }, {                    xtype: 'combobox',                    fieldLabel: '专业班级',                    allowBlank:false,                    name: 'grade_class',                    store: Ext.create('Ext.data.ArrayStore', {                        fields: ['abbr', 'state'],//                        data : Ext.example.states // from states.js                        data:[['01','13计算机1班'],['02','12计算机2班'],['03','12计算机3班'],                              ['04','12计算机4班'],['05','12计算机5班'],['06','12计算机6班'],                              ['07','其他']]                      }),                    valueField: 'abbr',                    displayField: 'state',                    typeAhead: true,                    queryMode: 'local',                    emptyText: '例如:13计算机1班'                }, {                    xtype: 'datefield',                    fieldLabel: 'Date of Birth',                    name: 'birthday',                    allowBlank: false,                    maxValue: new Date()                }            ]        }],        buttons: [{            text: '样例',            handler: function(){                formPanel.getForm().load({                    url: 'xml-form-data.xml',                    waitMsg: 'Loading...'                });            }        }, //        {//            text: '提交',//            disabled: true,//            formBind: true,//            handler: function(){//                this.up('form').getForm().submit({////                    url: 'xml-form-errors.xml',//                url:'admin/userRegister',//                    submitEmptyText: false,//                    waitTitle:"请稍候",//                    waitMsg:"正在提交表单数据，请稍候"//                })//            }//        },        {              text : '注册',              type : 'submit',              id:'register',             formBind:true,//只有表单全部校验通过 按钮才可用             disabled:true,//默认不可用            handler : function() {                          formPanel.getForm().submit({////                    url: 'xml-form-errors.xml',                url:'admin/userRegister',                    submitEmptyText: false,                    waitTitle:"请稍候",                    waitMsg:"正在提交表单数据，请稍候"                });            }          },        {            text: '重置',            handler: function(){            formPanel.getForm().reset();            }        }        ]    });});
0 0