EXT4.1表单提交(非AJAX)

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();
            }
        }
        ]
    });

});

版权声明：本文为博主原创文章，未经博主允许不得转载。