PDA

View Full Version : need to create menu in the west side of the window without using tree structure



kamalakarreddy vancha
2 May 2013, 1:36 AM
hi


Here i created the window with xtype:'button' and am linking the menu to this button.But this menu is showing down side...

If i created the menu by using xtype:'menuitem' it is displaying the menu text but it not showing the sub menu.
Here is the sample code of menu at west side added in the window:
{
xtype:'button',
text:'Main Menu1',
width:200,
menu: [{
text:'Menu2',
menu: [{
text:'Menu3',
handler: function () {

}
},{
text:'SCSPA',
handler: function () {
}
}]
}, {
text:'Main Menu2',
menu: [{
text:'Sub Menu1',
handler: function () {

}
}, {
text:'Sub Menu2',
handler: function () {

}
}, {
text:'Sub Menu3',
handler: function () {

}
}]
}]
}


The screen_shot1 shows the window created with above code.
Here if i click the Main menu1 it is showing the sub menu down side like in screen_shot2.
But i need the menu like screen_shot3.


Here i am attaching my sample window screen shot with menu at west side.(screen_shot4)
And i am attaching the the view of window with menu items in west side.(screen_shot5)
In this window if i click the sub menu2 of any main menu1,2,3 it will open the particular window that linked with the sub menu should be fit in the center region.

slemmon
3 May 2013, 7:41 PM
In your button config you can use:
menuAlign: 'tl-tr'
http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.button.Button-cfg-menuAlign

Or instead of using buttons you might have the panel containing the buttons be a menu with floating: false and each of the items just be menuItems.

kamalakarreddy vancha
6 May 2013, 9:25 PM
Thanks slemmon for your answer.
now its working fine with menuAlign:'tl-tr'.
I need to open the window that connected with particular sub menu should be fit in the center region of panel.
When i give the link of the window to the handler of sub menu it is opening seperatley not in the center region of the window.
but i need to open that window in a center panel only.
I am attaching the screen shot of my window devided into west and center region.
In that window i need to open anything that links with main menu should be open in the center region only.

Thanks

kamalakarreddy vancha
6 May 2013, 10:29 PM
hi
this is the code written in the handler of the sub menu of the menu to open the particular window.

handler: function () {
var partyMasterWinObj = {
winFunc: Modules.PartyMaster.win,
winId: Modules.CompIds.partyMasterFormWindowId
};
Modules.GlobalFuncs.displayWindow(partyMasterWinObj);
}


But this window is opening seperatley not in the center region.
But my need is to open the window linked to the sub menu should be open in the center region of the window.

slemmon
7 May 2013, 9:13 AM
Try adding the window component to the center panel as a child item using add().

kamalakarreddy vancha
7 May 2013, 9:01 PM
Hi slemmon
thanks to you for giving the replay to my query.
but in this if i create a window as a child to the panel in the center region that will be open directley when i open the window.
But my requirement is to open a window that is linked to the any sub menu of main menu(in my window i have the 4 menu's and these main menu's have the sub menu also.every sub menu have the link to open their seperate window).
if i click the link of any sub menu to open a window this should be fit in a center region of my window.
Like this any link of sub menu of in these 4 main menu that window should be open in the center region.

Thanks

slemmon
7 May 2013, 9:32 PM
Oh, so you're wanting to load content to the center panel after having selected an item from one of the sub-menus from the west region?

kamalakarreddy vancha
7 May 2013, 9:56 PM
Thanks slemmon
yes..
my sub menu have a link to open a window. that window have some content like some text fields, grid or etc.
this content should be fit in that center region of window only not to open in separate window.
like this every main menu have the sub menu.
every submenu have a link to open their own window.
every window have their own content.
that content of particular window should be fit in the center region of window only.
here i am attaching a screen shot i my requirement.

Thanks

slemmon
8 May 2013, 9:58 AM
You could have the handler of each sub-menu add (http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.panel.Panel-method-add)() content to the center panel. You'll need to removeAll (http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.panel.Panel-method-removeAll)() content from the center panel, though if it's already populated with components.

Alternatively, you may look into giving the center panel a card layout (http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.layout.container.Card) and load the views relative to your sub-menus into the cards in the center panel and just set them active with the sub-menu's handler.

The card layout option is what I would opt for myself in most situations, but that's up to you to see what works best for your application.

kamalakarreddy vancha
13 May 2013, 4:04 AM
hi
thanks slemmon
now am able to open every separate window content in the center region of window.
Thanks alot...