docs/source/MenuLayout.html

   1 <html>
   2 <head>
   3   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   4   <title>The source code</title>
   5     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
   6     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
   7 </head>
   8 <body  onload="prettyPrint();">
   9     <pre class="prettyprint lang-js">/*!
  10  * Ext JS Library 3.3.1
  11  * Copyright(c) 2006-2010 Sencha Inc.
  12  * licensing@sencha.com
  13  * http://www.sencha.com/license
  14  */
  15 <div id="cls-Ext.layout.MenuLayout"></div>/**
  16  * @class Ext.layout.MenuLayout
  17  * @extends Ext.layout.ContainerLayout
  18  * <p>Layout manager used by {@link Ext.menu.Menu}. Generally this class should not need to be used directly.</p>
  19  */
  20  Ext.layout.MenuLayout = Ext.extend(Ext.layout.ContainerLayout, {
  21     monitorResize : true,
  22
  23     type: 'menu',
  24
  25     setContainer : function(ct){
  26         this.monitorResize = !ct.floating;
  27         // This event is only fired by the menu in IE, used so we don't couple
  28         // the menu with the layout.
  29         ct.on('autosize', this.doAutoSize, this);
  30         Ext.layout.MenuLayout.superclass.setContainer.call(this, ct);
  31     },
  32
  33     renderItem : function(c, position, target){
  34         if (!this.itemTpl) {
  35             this.itemTpl = Ext.layout.MenuLayout.prototype.itemTpl = new Ext.XTemplate(
  36                 '<li id="{itemId}" class="{itemCls}">',
  37                     '<tpl if="needsIcon">',
  38                         '<img alt="{altText}" src="{icon}" class="{iconCls}"/>',
  39                     '</tpl>',
  40                 '</li>'
  41             );
  42         }
  43
  44         if(c && !c.rendered){
  45             if(Ext.isNumber(position)){
  46                 position = target.dom.childNodes[position];
  47             }
  48             var a = this.getItemArgs(c);
  49
  50 //          The Component's positionEl is the <li> it is rendered into
  51             c.render(c.positionEl = position ?
  52                 this.itemTpl.insertBefore(position, a, true) :
  53                 this.itemTpl.append(target, a, true));
  54
  55 //          Link the containing <li> to the item.
  56             c.positionEl.menuItemId = c.getItemId();
  57
  58 //          If rendering a regular Component, and it needs an icon,
  59 //          move the Component rightwards.
  60             if (!a.isMenuItem && a.needsIcon) {
  61                 c.positionEl.addClass('x-menu-list-item-indent');
  62             }
  63             this.configureItem(c);
  64         }else if(c && !this.isValidParent(c, target)){
  65             if(Ext.isNumber(position)){
  66                 position = target.dom.childNodes[position];
  67             }
  68             target.dom.insertBefore(c.getActionEl().dom, position || null);
  69         }
  70     },
  71
  72     getItemArgs : function(c) {
  73         var isMenuItem = c instanceof Ext.menu.Item,
  74             canHaveIcon = !(isMenuItem || c instanceof Ext.menu.Separator);
  75
  76         return {
  77             isMenuItem: isMenuItem,
  78             needsIcon: canHaveIcon && (c.icon || c.iconCls),
  79             icon: c.icon || Ext.BLANK_IMAGE_URL,
  80             iconCls: 'x-menu-item-icon ' + (c.iconCls || ''),
  81             itemId: 'x-menu-el-' + c.id,
  82             itemCls: 'x-menu-list-item ',
  83             altText: c.altText || ''
  84         };
  85     },
  86
  87     //  Valid if the Component is in a <li> which is part of our target <ul>
  88     isValidParent : function(c, target) {
  89         return c.el.up('li.x-menu-list-item', 5).dom.parentNode === (target.dom || target);
  90     },
  91
  92     onLayout : function(ct, target){
  93         Ext.layout.MenuLayout.superclass.onLayout.call(this, ct, target);
  94         this.doAutoSize();
  95     },
  96
  97     doAutoSize : function(){
  98         var ct = this.container, w = ct.width;
  99         if(ct.floating){
 100             if(w){
 101                 ct.setWidth(w);
 102             }else if(Ext.isIE){
 103                 ct.setWidth(Ext.isStrict && (Ext.isIE7 || Ext.isIE8) ? 'auto' : ct.minWidth);
 104                 var el = ct.getEl(), t = el.dom.offsetWidth; // force recalc
 105                 ct.setWidth(ct.getLayoutTarget().getWidth() + el.getFrameWidth('lr'));
 106             }
 107         }
 108     }
 109 });
 110 Ext.Container.LAYOUTS['menu'] = Ext.layout.MenuLayout;
 111 </pre>
 112 </body>
 113 </html>