src/widgets/layout/MenuLayout.js

   1 /*!
   2  * Ext JS Library 3.1.1
   3  * Copyright(c) 2006-2010 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 /**
   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>
  11  */
  12  Ext.layout.MenuLayout = Ext.extend(Ext.layout.ContainerLayout, {
  13     monitorResize : true,
  14
  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);
  21     },
  22
  23     renderItem : function(c, position, target){
  24         if (!this.itemTpl) {
  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}"/>',
  29                     '</tpl>',
  30                 '</li>'
  31             );
  32         }
  33
  34         if(c && !c.rendered){
  35             if(Ext.isNumber(position)){
  36                 position = target.dom.childNodes[position];
  37             }
  38             var a = this.getItemArgs(c);
  39
  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));
  44
  45 //          Link the containing <li> to the item.
  46             c.positionEl.menuItemId = c.getItemId();
  47
  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');
  52             }
  53             this.configureItem(c, position);
  54         }else if(c && !this.isValidParent(c, target)){
  55             if(Ext.isNumber(position)){
  56                 position = target.dom.childNodes[position];
  57             }
  58             target.dom.insertBefore(c.getActionEl().dom, position || null);
  59         }
  60     },
  61
  62     getItemArgs : function(c) {
  63         var isMenuItem = c instanceof Ext.menu.Item;
  64         return {
  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 '
  71         };
  72     },
  73
  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);
  77     },
  78
  79     onLayout : function(ct, target){
  80         Ext.layout.MenuLayout.superclass.onLayout.call(this, ct, target);
  81         this.doAutoSize();
  82     },
  83
  84     doAutoSize : function(){
  85         var ct = this.container, w = ct.width;
  86         if(ct.floating){
  87             if(w){
  88                 ct.setWidth(w);
  89             }else if(Ext.isIE){
  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'));
  93             }
  94         }
  95     }
  96 });
  97 Ext.Container.LAYOUTS['menu'] = Ext.layout.MenuLayout;