提交表单设计

提交表单设计

增加了提交前的验证函数,利用一个dict映射数组,保存提示消息保。并利用循环,将映射的数组的关系进行查找,如果有此值,则提示响应的内容。

需要改进的地方。能否省略这个dict数组,将其存放到组件的属性中,直接获取组件的提示消息?

猜想,估计能实行,利用getFields来进行如下操作。

var me=this;
var form =me.down('form').getForm();
var data=form.getFields();
//然后再遍历这个数组,如果有自定义的字段,则提示响应的消息。

完整的代码如下:

formSubmit:function(){
    var me=this;
    var form =me.down('form').getForm();
    var data=form.getValues();
    //对数据进行验证
    if(!me.formIsValid()){
        return;
    }
    Ext.Msg.wait("保存中,请稍后... ...","操作提示");
    form.submit({
        submitEmptyText:false,
        success: function(form, action) {
            Ext.Msg.hide();
            if(parseInt(action.result.code)>0){//数据验证失败
                var msg=action.result.msg;
                if(action.result.code==1){//一般错误提示
                    Ext.Msg.show({
                        title:"操作提示",
                        msg:msg,
                        icon:Ext.Msg.WARNING,
                        buttons:Ext.Msg.OK,
                        minWidth:300
                    });
                }
                if(action.result.code==2){//时间冲突
                    Ext.Msg.show({
                        title: "操作提示",
                        msg: msg,
                        minWidth: 300,
                        icon: Ext.Msg.QUESTION,
                        buttons: Ext.Msg.YESNO,
                        fn: function (idx) {
                            if ("yes" == idx) {
                                //显示错误列表
                                //me.showConflictMeetingGrid(action.result.data,action.result.interval_time);
                            }
                        }
                    });
                }
            }else{//数据验证成功
                Ext.Msg.show({
                    title:"操作提示",
                    msg:"保存成功!",
                    icon:Ext.Msg.INFO,
                    buttons:Ext.Msg.OK,
                    fn:function(){						
                       
                    }
                });
            }
        },
        failure: function(form, action) {
            Ext.Msg.hide();
            Ext.Msg.show({
                title:"操作提示",
                msg:"编辑失败,请检查输入的数据是否完整。",
                icon:Ext.Msg.ERROR,
                buttons:Ext.Msg.OK
            });
        }
    });
},
/***********
 * 2019年1月18日
 * 表单验证
 ***********/
formIsValid:function(){
    var me=this;
    var form =me.down('form').getForm();
    var data=form.getValues();
    var msg=[];
    var dict={
        'conference_room_id':'会议室',
        'meeting_type':'会议类型',
        'meeting_video':'会议属性',
        'meeting_logo':'桌牌设置',
        'starttime':'时间',
        'meeting_name':'主题',
        'speaker':'主讲人',
        'attend_desc':'参与者',
        'template_id':'模板'
    };
    for(var key in dict){
        if(!data[key]){
            msg.push(dict[key]);
        }
    }
    if(msg.length>0){
        Ext.toast('请完善以下字段:'+msg.join('、')+'!');
    }
    return msg.length===0;
},

题外话

本来想利用,input输入错误后,特殊的css样式来提示用户输入错误的,结果发现这样做,由于html的差别较大,实现起来较难。

//这个是input标签,输入错误的对比
x-form-field x-form-required-field x-form-text x-form-text-default  x-form-empty-field x-form-empty-field-default x-form-invalid-field x-form-invalid-field-default
x-form-field x-form-required-field x-form-text x-form-text-default 
//这个是外层包裹的div,输入错误的对比
x-form-text-wrap x-form-text-wrap-default x-form-text-wrap-invalid
x-form-text-wrap x-form-text-wrap-default
//上面的方式,只适用于input框。