Upgrade to ExtJS 3.3.1 - Released 11/30/2010
[extjs.git] / 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>