как сделать полное модальное окно в ext 4?
как окно в Microsoft ОС (ХР,Vista, 7 и т. д.)...
если главное окно создать модальное окно, пользователь не может получить доступ к главному окну,
(включая закрытие и доступ к панели инструментов и т. д.)
Я хочу сделать аналогичный с extjs,.. это мой модальный пример:
Ext.create("Ext.Window",{
title : 'aa',
width : 200,
height: 150,
html : 'a',
tbar : [{
text : 'aa' ,
handler :function(){
Ext.create("Ext.Window",{
title : 'aa',
width : 150,
closable : false,
height: 100,
html : 'b',
ownerCt : this,
modal : true
}).show();
}
}]
}).show();
проблема в том, что он просто отключает тело главного окна, пользователь все еще может получить доступ к главной панели инструментов, также для ее закрытия..
мой вопрос в том, как сделать полный модальный ? или если это не может быть сделано, как отключить главное окно, если появляется модальное окно, я использую listener show на modal win, но проблема в том, что я не могу получить доступ к главному окну из этого слушателя...
Edit:
Это мой код до сих пор :
Ext.create("Ext.Window",{
title : 'aa',
width : 200,
height: 150,
html : 'a',
maskOnDisable : false,
tbar : [{
text : 'aa' ,
handler :function(a){
var parent = a.up("window");
parent.disable();
Ext.create("Ext.Window",{
title : 'aa',
width : 150,
height: 100,
html : 'b',
listeners : {
scope : this,
"close" : function(){
parent.enable();
},
/*
"blur" : function(){
this.focus()
}
*/
}
}).show();
}
}]
}).show();
althougt это не модальная концепция, но это похоже на то, что я хочу..
теперь у меня новая проблема, maskOnDisable
не работает.. и мне нужно событие, как blur
, поэтому, если пользователь нажимает родительское окно, он возвращается к всплывающему окну окно...
(должен ли я опубликовать его как новый вопрос ??)
2 ответов
Ответ:
вы пытались disable()
и enable()
родительское окно соответствующим образом? Я думаю, что это должно помочь вам остановить доступ к первому окну и в то же время позволить вашему пользователю получить доступ к главному меню приложения и экрану. Вот что я попробовал:
var x = Ext.create("Ext.Window",{
title : 'aa',
width : 200,
height: 150,
html : 'a',
tbar : [{
text : 'aa' ,
handler :function(){
// I disable the parent window.
x.disable();
Ext.create("Ext.Window",{
title : 'aa',
width : 150,
closable : false,
height: 100,
html : 'b'
// You will need to enable the parent window in close handler of this window.
}).show();
}
}]
}).show();
когда вы отключаете окно, компоненты в окне отключены, и вы не сможете даже переместить окно. Но в то же время, у вас будет доступ к другим компоненты, такие как главное меню, сетки на странице. У вас также будет доступ к новому окну. Теперь, чтобы он вел себя как модальный, вам нужно включить родительское окно при закрытии дочернего окна. Вы можете использовать enable()
способ для этого.
Я не могу придумать другого способа достичь того, что вы ищете.
Ответ:
интересно, почему вы установили ownerCt
свойство, относящееся к самому окну! Что является вашим главным проблема. Путем удаления собственности вы достигнете того, что вы ищете. Вот обновленный код:
Ext.create("Ext.Window",{
title : 'Extra window!',
width : 150,
height: 100,
closable : false,
html : 'A window that is a modal!',
modal : true
}).show();
была ли какая-либо причина в установке ownerCt
собственность?
в эти дни вы устанавливаете modal: true
Ext.define('myApp.view.MyModalWindow', {
extend: 'Ext.window.Window',
...
modal: true,
...