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