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.2.1
  11  * Copyright(c) 2006-2010 Ext JS, Inc.
  12  * licensing@extjs.com
  13  * http://www.extjs.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 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, position);
  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         return {
  75             isMenuItem: isMenuItem,
  76             needsIcon: !isMenuItem && (c.icon || c.iconCls),
  77             icon: c.icon || Ext.BLANK_IMAGE_URL,
  78             iconCls: 'x-menu-item-icon ' + (c.iconCls || ''),
  79             itemId: 'x-menu-el-' + c.id,
  80             itemCls: 'x-menu-list-item '
  81         };
  82     },
  83
  84     //  Valid if the Component is in a <li> which is part of our target <ul>
  85     isValidParent : function(c, target) {
  86         return c.el.up('li.x-menu-list-item', 5).dom.parentNode === (target.dom || target);
  87     },
  88
  89     onLayout : function(ct, target){
  90         Ext.layout.MenuLayout.superclass.onLayout.call(this, ct, target);
  91         this.doAutoSize();
  92     },
  93
  94     doAutoSize : function(){
  95         var ct = this.container, w = ct.width;
  96         if(ct.floating){
  97             if(w){
  98                 ct.setWidth(w);
  99             }else if(Ext.isIE){
 100                 ct.setWidth(Ext.isStrict && (Ext.isIE7 || Ext.isIE8) ? 'auto' : ct.minWidth);
 101                 var el = ct.getEl(), t = el.dom.offsetWidth; // force recalc
 102                 ct.setWidth(ct.getLayoutTarget().getWidth() + el.getFrameWidth('lr'));
 103             }
 104         }
 105     }
 106 });
 107 Ext.Container.LAYOUTS['menu'] = Ext.layout.MenuLayout;
 108 </pre>
 109 </body>
 110 </html>