PDA

View Full Version : Layout menu



Cine
6 Jan 2012, 2:14 AM
I am trying to layout a menu, and not having much luck. Apparently I don't understand the principles of Ext layout.

I have a menu with layout: fit, it has 1 item, which is also a menu, and 1 bottom docked toolbar.



Ext.define("xxx.StartMenu",
{
extend: 'Ext.menu.Menu',
requires: [
'Ext.menu.Menu',
'Ext.toolbar.Toolbar'
],
cls: 'x-menu',
defaultAlign: 'br-tr',
iconCls: 'spr-user',
floating: true,
shadow: true,
layout: 'fit',
initComponent: function () {
var me = this;
me.title = "very very very very very long string of unknown length";
me.menu = new Ext.menu.Menu({
id: 'startMenu',
border: false,
width:"100%",
floating: false,
items: []
});

me.items = [me.menu];

Ext.menu.Manager.register(me);

me.toolbar = new Ext.toolbar.Toolbar({
dock: 'bottom',
cls: 'cg-start-menu-toolbar',
layout: 'hbox',
items: [
{ xtype: 'tbfill' },
{
text: 'Settings',
id: 'settingsbutton',
iconCls: 'spr-gears'
},
'-',
{
text: 'Logout',
id: "logoutbutton",
iconCls: 'spr-logout'
}
]
});
me.dockedItems = [me.toolbar];

me.callParent();
me.menu.fireEvent("created", me);
me.on('deactivate', me.hide);
}
});


This will show a menu which cuts off the long title string, and also half the "logout" text.

I also have a second problem, if I add a fixed width on the outer panel, and add an menu item to the inner menu with additional subitems, the item in the main menu is only as wide as widest menu item, not as wide as the outer menu, thus the arrows end up in the middle of the menu, instead of being right aligned.

PS. I tried setting minWidth on the outer panel (since I could live with that), but it seems there is a bug in 4.1beta1 in that the defaultAlign is then ignored on the very first show of the menu. It just shows the menu where I pushed the menu, which looks horrible.

mitchellsimoens
6 Jan 2012, 1:06 PM
Did you give a width to the start menu?

Cine
6 Jan 2012, 8:21 PM
No, since I cannot know ahead of time the length of the title (since it is user defined) and length of any of the menu items (since they are translatable strings) I wanted to prevent doing that.




Ext.define("xxx.StartMenu",
{
extend: 'Ext.menu.Menu',
requires: [
'Ext.menu.Menu',
'Ext.toolbar.Toolbar'
],
id: 'startMenu',
iconCls: 'spr-user',
cls: 'x-menu',

defaultAlign: 'br-tr',
floating: true,
shadow: true,
minWidth: 250,
initComponent: function () {
var me = this;

me.items = [];

Ext.menu.Manager.register(me);

me.toolbar = new Ext.toolbar.Toolbar({
dock: 'bottom',
cls: 'mytoolbar',
layout: 'hbox',
items: [
{ xtype: 'tbfill' },
{
text: 'Settings',
id: 'settingsbutton',
iconCls: 'spr-gears'
},
'-',
{
text: 'Logout',
id: "logoutbutton",
iconCls: 'spr-logout'
}
]
});
me.dockedItems = [me.toolbar];

me.callParent();
me.fireEvent("created", me);
me.on('deactivate', me.hide);
}
});

Will work for me, except when the title is too long