how to make a full modal window in ext 4?
These days you set modal: true
Ext.define('myApp.view.MyModalWindow', {
extend: 'Ext.window.Window',
...
modal: true,
...
New Answer:
Have you tried to disable()
and enable()
the parent window appropriately? I think that should help you in stopping access to the first window and at the same time allowing your user to access the main application menu and screen. Here is what I tried:
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();
When you disable the window, the components within the window are disabled and you will not be able to even move the window. But at the same time, you will have access to other components like your main menu, grids on the page. You will also have access to the new window. Now, to make it behave like a modal, you need to enable the parent window when you close the child window. You can make use of the enable()
method for that.
I cannot think of any other way to achieve what you are looking for.
Old Answer:
I wonder why you have set the ownerCt
property referring to the window itself! That is your main problem. By removing the property you will achieve what you are looking for. Here is the updated code:
Ext.create("Ext.Window",{
title : 'Extra window!',
width : 150,
height: 100,
closable : false,
html : 'A window that is a modal!',
modal : true
}).show();
Was there any reason in setting the ownerCt
property?