-
Ext.MessageBox getDialogのoverride方法
Ext.MessageBox getDialogのoverride方法
おせわになります。
以前こちらに、「Ext.Windowのbackspace押下時の制御について」の以下のスレッドで、Ext.Window時の制御方法をお伺いしました。
http://extjs.com/forum/showthread.php?t=65258
同様の現象がExt.MessageBoxでも発生し、対策を思案中です。
以下のような関数を作成し、
function dialogHistoryControl(){
if(Ext.isIE6){ // IE6だったら
var ifr = Ext.select('.ext-shim').item(0).dom.contentWindow;
ifr.document.onkeydown = function(e){
if(ifr.event.keyCode==8) return false;
};
}
}
以下のように設定すれば、現象自体は回避できました。
var msgDialog = Ext.Msg.show({
・・・・・・・
});
dialogHistoryControl();
しかし、Ext.Msg.showはすでに数百ヶ所あり、全部に対して個々に対策するのは難しい状況です。
そのため、できればExt.MessageBoxのgetDialogメソッドを以下のように処理を追加してoverrideしたいのですが、returnで括られた中に存在する為、うまくoverrideできませんでした。
return { ←ext-all.jsではこのように括られています。
getDialog : function(titleText){
if(!dlg){
dlg = new Ext.Window({
autoCreate : true,
title:titleText,
resizable:false,
constrain:true,
constrainHeader:true,
minimizable : false,
maximizable : false,
stateful: false,
modal: true,
shim:true,
buttonAlign:"center",
width:400,
height:100,
minHeight: 80,
plain:true,
footer:true,
closable:true,
close : function(){
if(opt && opt.buttons && opt.buttons.no && !opt.buttons.cancel){
handleButton("no");
}else{
handleButton("cancel");
}
}
});
buttons = {};
var bt = this.buttonText;
buttons["ok"] = dlg.addButton(bt["ok"], handleButton.createCallback("ok"));
buttons["yes"] = dlg.addButton(bt["yes"], handleButton.createCallback("yes"));
buttons["no"] = dlg.addButton(bt["no"], handleButton.createCallback("no"));
buttons["cancel"] = dlg.addButton(bt["cancel"], handleButton.createCallback("cancel"));
buttons["ok"].hideMode = buttons["yes"].hideMode = buttons["no"].hideMode = buttons["cancel"].hideMode = 'offsets';
dlg.render(document.body);
dlg.getEl().addClass('x-window-dlg');
mask = dlg.mask;
bodyEl = dlg.body.createChild({
html:'<div class="ext-mb-icon"></div><div class="ext-mb-content"><span class="ext-mb-text"></span><br /><div class="ext-mb-fix-cursor"><input type="text" class="ext-mb-input" /><textarea class="ext-mb-textarea"></textarea></div></div>'
});
iconEl = Ext.get(bodyEl.dom.firstChild);
var contentEl = bodyEl.dom.childNodes[1];
msgEl = Ext.get(contentEl.firstChild);
textboxEl = Ext.get(contentEl.childNodes[2].firstChild);
textboxEl.enableDisplayMode();
textboxEl.addKeyListener([10,13], function(){
if(dlg.isVisible() && opt && opt.buttons){
if(opt.buttons.ok){
handleButton("ok");
}else if(opt.buttons.yes){
handleButton("yes");
}
}
});
textareaEl = Ext.get(contentEl.childNodes[2].childNodes[1]);
textareaEl.enableDisplayMode();
progressBar = new Ext.ProgressBar({
renderTo:bodyEl
});
bodyEl.createChild({cls:'x-clear'});
}
// 以下の3行を追加
setTimeout(function(){
try{ dialogHistoryControl();}catch(e){}
}, 50);
return dlg;
}
};
このメソッドをoverrideする方法はありますでしょうか?
また、無理であれば、これに変わる対策がございますでしょうか?
個々に記述した部分を変更せず、共通で出来る対策が良いのですが・・・。
よろしくお願いします。
-
記述し忘れました
記述し忘れました
こちらでは、以下のように、Ext.Msg.showのあと、横幅を変更する為に、かならずgetDialog を呼び出しています。
var msgDialog = Ext.Msg.show({
・・・・・・・
});
msgDialog.getDialog().setSize(設定したい幅);
そのため、getDialog内の修正で全箇所対策できます。
よろしくお願いします。
-
Sencha - Support Team

Originally Posted by
Mari
そのため、できればExt.MessageBoxのgetDialogメソッドを以下のように処理を追加してoverrideしたいのですが、returnで括られた中に存在する為、うまくoverrideできませんでした。
returnの中で定義されている、というわけではなく、Ext.MessageBoxがシングルトンクラス(という呼び方も微妙ですが)なので、overrideが効かないだけですね
Ext.overrideは、overrideする対象のクラスのprototype以下を書き換えるのですが、Ext.MessageBoxはprototypeを持たないので、効きません。とはいえ、overrideを使わずにgetDialogを上書きしようとしてもプライベート変数・メソッドのからみでこれもうまくいきません。
なので、非常にベタな方法ですが、MessageBox.jsの中身を新しいファイルなりにコピーして書き換えるというのが一番シンプルかと思います(で、そのファイルをext-all.jsの直後に読み込む)。
-
うまく動作しました!
うまく動作しました!
回答ありがとうございました。
こちらの環境は、バージョンが2.1.0のため、MessageBox-min.jsの内容を修正し、
全画面で読み込む共通のjs内に記述しましたところ、正常に動作いたしました!
ありがとうございました。
今後ともよろしくお願いします。
-
あなたは非常に貴重な情報をご提供するため、どのように私はあなたに感謝することができます。
Sencha is used by over two million developers. Join the community, wherever you’d like that community to be
or Join Us