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

最新推荐文章于 2023-10-10 16:44:17 发布

原创最新推荐文章于 2023-10-10 16:44:17 发布 · 5.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#extjs #提示框 #输入框

extjs4 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了在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定义成不同的变量。