3 * Copyright(c) 2006-2010 Ext JS, LLC
5 * http://www.extjs.com/license
8 * @class Ext.layout.MenuLayout
9 * @extends Ext.layout.ContainerLayout
10 * <p>Layout manager used by {@link Ext.menu.Menu}. Generally this class should not need to be used directly.</p>
12 Ext.layout.MenuLayout = Ext.extend(Ext.layout.ContainerLayout, {
15 setContainer : function(ct){
16 this.monitorResize = !ct.floating;
17 // This event is only fired by the menu in IE, used so we don't couple
18 // the menu with the layout.
19 ct.on('autosize', this.doAutoSize, this);
20 Ext.layout.MenuLayout.superclass.setContainer.call(this, ct);
23 renderItem : function(c, position, target){
25 this.itemTpl = Ext.layout.MenuLayout.prototype.itemTpl = new Ext.XTemplate(
26 '<li id="{itemId}" class="{itemCls}">',
27 '<tpl if="needsIcon">',
28 '<img src="{icon}" class="{iconCls}"/>',
35 if(Ext.isNumber(position)){
36 position = target.dom.childNodes[position];
38 var a = this.getItemArgs(c);
40 // The Component's positionEl is the <li> it is rendered into
41 c.render(c.positionEl = position ?
42 this.itemTpl.insertBefore(position, a, true) :
43 this.itemTpl.append(target, a, true));
45 // Link the containing <li> to the item.
46 c.positionEl.menuItemId = c.getItemId();
48 // If rendering a regular Component, and it needs an icon,
49 // move the Component rightwards.
50 if (!a.isMenuItem && a.needsIcon) {
51 c.positionEl.addClass('x-menu-list-item-indent');
53 this.configureItem(c, position);
54 }else if(c && !this.isValidParent(c, target)){
55 if(Ext.isNumber(position)){
56 position = target.dom.childNodes[position];
58 target.dom.insertBefore(c.getActionEl().dom, position || null);
62 getItemArgs : function(c) {
63 var isMenuItem = c instanceof Ext.menu.Item;
65 isMenuItem: isMenuItem,
66 needsIcon: !isMenuItem && (c.icon || c.iconCls),
67 icon: c.icon || Ext.BLANK_IMAGE_URL,
68 iconCls: 'x-menu-item-icon ' + (c.iconCls || ''),
69 itemId: 'x-menu-el-' + c.id,
70 itemCls: 'x-menu-list-item '
74 // Valid if the Component is in a <li> which is part of our target <ul>
75 isValidParent : function(c, target) {
76 return c.el.up('li.x-menu-list-item', 5).dom.parentNode === (target.dom || target);
79 onLayout : function(ct, target){
80 Ext.layout.MenuLayout.superclass.onLayout.call(this, ct, target);
84 doAutoSize : function(){
85 var ct = this.container, w = ct.width;
90 ct.setWidth(Ext.isStrict && (Ext.isIE7 || Ext.isIE8) ? 'auto' : ct.minWidth);
91 var el = ct.getEl(), t = el.dom.offsetWidth; // force recalc
92 ct.setWidth(ct.getLayoutTarget().getWidth() + el.getFrameWidth('lr'));
97 Ext.Container.LAYOUTS['menu'] = Ext.layout.MenuLayout;