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

前两天接到新需求，退回功能的退回原因改为必填，原来是可以为空的，原来的退回是点击之后弹出一个提示框，里面可以填退回原因，代码(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定义成不同的变量。