提交表单设计
提交表单设计
增加了提交前的验证函数,利用一个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框。