关于extjs的Ext.MessageBox.prompt和非空验证方法

本文介绍了在ExtJS中遇到的Ext.MessageBox.prompt返回时直接关闭导致无法进行非空验证的问题,以及解决方案。通过创建自定义窗口和FormPanel实现了一个具有验证功能的输入框提示框。在解决过程中,作者强调了FormPanel和Window分离的重要性,以避免多次使用后出现的面板消失错误。此外,由于页面以标签页形式打开,为防止冲突,建议为每个页面的FormPanel使用不同变量。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前两天接到新需求,退回功能的退回原因改为必填,原来是可以为空的,原来的退回是点击之后弹出一个提示框,里面可以填退回原因,代码(1)如下:

Ext.MessageBox.prompt("输入框","请输入退回原因:",function(bu,txt){ 


    if(bu == "ok") {
    ……
}   


},this,150); 

但是当验证里面的txt是不是为空时才发现Ext.MessageBox.prompt方法里面点击之后会直接关闭消息框,这样就达不到想要的效果,试了各种方法都不行,所以决定自己写一个window,弹出个跟Ext.MessageBox.prompt类似的东西,首先定义一个FormPanel面板,在这里面写退回原因,代码(2)如下:

var addWin;

var formPanelCf = new Ext.form.FormPanel({
   autoWidth:true,
   layout:"form",
   frame:true,
   labelWidth:260,
   labelAlign:"right",
   items:[{
    xtype:"label",
    height  : 20,
    text :"请输入退回原因:"
   },{
    xtype : "textarea",
    inputType : 'text',
    height : 150,
    hideLabel : true,
    id:"cancelarea",
    anchor : "95%"
   }]
  });

然后再在退回方法里写一个window,用来存放上面的FormPanel,并达到和Ext.MessageBox.prompt类似的弹出效果,代码(3)如下:

if (!addWin) {
        addWin = new Ext.Window({
            title:"提示",
            modal:true,
            width:400,
            height:250,
            collapsible:false,
            resizable:false,
            closeAction:'hide',
            //items:[formPanelCf] // 将关闭窗口动作设置为隐藏(不销毁窗口对象)
            items : formPanelCf,
            buttons : [{
    text : '确定',
    handler : function(){
    var txt = Ext.getCmp('cancelarea').getValue();
    if(txt == null || txt == ''){
    Ext.Msg.alert('提示','请输入退回原因!');
    }else{
     var pkArray = [];
        for(var i = 0, len = records.length; i < len; i++) {
            var pk = records[i].get(thisButton.idName);
            pkArray.push(pk);
        }
        Ext.Ajax.request({
            url : thisButton.deleteActionUrl,
            params : {
                'dataReportGuid' : pkArray,
                'drIndexDataReport.backreason':txt
            },
            method : 'POST',
            success : function(response) {
                Ext.Msg.alert('提示', '退回成功!');
                addWin.hide();
                formPanelCf.getForm().reset();
                gridPanel_data.getStore().reload();
            },
            failure : function(response) {
                Ext.Msg.alert('提示', '退回失败!');
            }
        });
        addWin.hide();
        formPanelCf.getForm().reset();
    }
     //alert(Ext.getCmp('cancelarea').getValue());
    }
   }, {
    text : '取消',
    handler : function(){
     addWin.hide();
     formPanelCf.getForm().reset();
    }
   }]
        });
    }
    addWin.show();

用第三段代码代替第二段即可,这样就可以实现上面说的功能,可能有人会问为什么不把(2)(3)一起写进退回方法里,为什么还要分开来写,其实我在这里也是摔过一个有跟头,一开始的时候我也是这么想的,也这么做了,但是,测试结果表示:当我点退回或确定后,在点退回的时候,我输入退回原因的FormPanel面板会消失,终于发现,原来我是每次点击无论是确定还是退回的时候都要把原来的面板hide掉,所以下一次打开的时候就会出现上面提到的错误,所以我先在hide掉之后先把我的面板reset()一下,保持面板清洁,最重要的就是把FormPanel和window分开来,到这里这个问题就解决了。
ps:由于我的好多页面都涉及到到了这个功能,而每一个页面都是以一个标签页的方式打开的,所以为了避免标签页之间冲突,一定要把FormPanel定义成不同的变量。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值