PDA

View Full Version : Need to open the window or panel in the center region of the panel.



kamalakarreddy vancha
13 Aug 2013, 10:04 PM
HI,
here i created the window. I added the panel to this window. That panel is divided into west and center panels.
In the west panel i added the vertical menus. These menus have the sub menus also.(Window.png)
My plan is to open a window or panel anything it is from the sub menus of the vertical menu that window or panel should be fit exactly in the center panel only like (Window3.png).
I am able to open the window from the sub menu but it is not opening in the center paenl and
it is opening as a separate window not in the center panel(Window2.png).
And if i click the one more sub menu that should be also fit in the center panel only.
Here am sending my code and screen shots of window.
Please give me solution for this problem.

Code related to the window having the panel. Panel is devided into west and center panels. and west panel have the vertical menu.
Modules.VerticalMenu.menu = function(){
var panel = {
xtype:'panel',
width:800,
height:580,
layout:'border',
items: [{
xtype: 'panel',
region: 'west',
title:'West Panel',
items: [{
xtype: 'menu',
width:140,
height:580,
floating: false,
items: [{
text: 'main menu1',
iconCls:'sampleIcon',
menu: [{
text: 'sub menu1',
menu: [{
text: 'sub menu11',
handler: function () {
Ext.getCmp('centerPanelId').removeAll();
Ext.getCmp('centerPanelId').add(Modules.VerticalMenuForm.form());
}
}, {
text: 'sub menu12',
handler: function () {
}
}
]
},{
text: 'sub menu2',
menu: [{
text: 'sub menu21',
handler: function () {
}
}, {
text: 'sub menu22',
handler: function () {

}
}
]
},{
text: 'sub menu3',
menu: [{
text: 'sub menu31',
handler: function () {
}
}, {
text: 'sub menu32',
handler: function () {

}
}
]
}
]
},{
text:'main menu2',
menu:[{
text:'submenu1',
menu:[{
text:'submenu11',
handler: function () {
}
},{
text:'submenu12',
handler: function () {
}
}]
}]
},{
text:'main menu3',
menu:[{
text:'submenu1',
menu:[{
text:'submenu11',
handler: function () {
}
},{
text:'submenu12',
handler: function () {
}
}]
}]
}
]
}
]
},{
xtype: 'panel',
region:'center',
title:'Center Panel',
html:'I am in center',
id:'centerPanelId'
}]
};
var win = Ext.create('Ext.window.Window', {
title: 'Window',
collapsible: true,
maximizable: true,
width:800,
height:600,
items: [panel]
});
win.show();
}


This code is related the window that is i am opening from the sub menu.(compose_msg.png)
Modules.VerticalMenuForm.form = function(){
var panel = {
xtype:'panel',
title: 'Filters',
items: [{
xtype:'textfield',
fieldLabel:'Text1',
labelAlign:'right'
},{
xtype:'textfield',
fieldLabel:'text2',
labelAlign:'right'
}]

};
var win = Ext.create('Ext.window.Window', {
title: 'Compose message',
width:600,
height:500,
items: [panel]
});
win.show();
}




Thanks
Kamalakar Reddy

suzuki1100nz
13 Aug 2013, 10:33 PM
When you add the window to the centre panel set the constrain or constrain header config.
If you dont the window will render to the document body.

See http://docs-origin.sencha.com/extjs/4.2.1/#!/example/window/window.html

Also when submitting code snippets please use the code tag in the editor

kamalakarreddy vancha
14 Aug 2013, 1:51 AM
ok thanks for your replay..
but this is not suit to my requirement.
the opened window from the menu that should be directly opened in the center panel only not as a separate window and i don't want to adjust the opened window with constraints.
and at the same time if i want to open a another window from the second menu that should be also fit in the center panel only means first window will remove from the center panel and second window should be appear in the same panel i.e in the center panel.

Thanks
Kamalakar Reddy