docs/source/ToolbarLayout.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.ToolbarLayout"></div>/**
  10  * @class Ext.layout.ToolbarLayout
  11  * @extends Ext.layout.ContainerLayout
  12  * Layout manager implicitly used by Ext.Toolbar.
  13  */
  14 Ext.layout.ToolbarLayout = Ext.extend(Ext.layout.ContainerLayout, {
  15     monitorResize : true,
  16     triggerWidth : 18,
  17     lastOverflow : false,
  18
  19     noItemsMenuText : '<div class="x-toolbar-no-items">(None)</div>',
  20
  21     // private
  22     onLayout : function(ct, target){
  23         if(!this.leftTr){
  24             var align = ct.buttonAlign == 'center' ? 'center' : 'left';
  25             target.addClass('x-toolbar-layout-ct');
  26             target.insertHtml('beforeEnd',
  27                  '<table cellspacing="0" class="x-toolbar-ct"><tbody><tr><td class="x-toolbar-left" align="' + align + '"><table cellspacing="0"><tbody><tr class="x-toolbar-left-row"></tr></tbody></table></td><td class="x-toolbar-right" align="right"><table cellspacing="0" class="x-toolbar-right-ct"><tbody><tr><td><table cellspacing="0"><tbody><tr class="x-toolbar-right-row"></tr></tbody></table></td><td><table cellspacing="0"><tbody><tr class="x-toolbar-extras-row"></tr></tbody></table></td></tr></tbody></table></td></tr></tbody></table>');
  28             this.leftTr = target.child('tr.x-toolbar-left-row', true);
  29             this.rightTr = target.child('tr.x-toolbar-right-row', true);
  30             this.extrasTr = target.child('tr.x-toolbar-extras-row', true);
  31         }
  32
  33         var side = ct.buttonAlign == 'right' ? this.rightTr : this.leftTr,
  34             pos = 0,
  35             items = ct.items.items;
  36
  37         for(var i = 0, len = items.length, c; i < len; i++, pos++) {
  38             c = items[i];
  39             if(c.isFill){
  40                 side = this.rightTr;
  41                 pos = -1;
  42             }else if(!c.rendered){
  43                 c.render(this.insertCell(c, side, pos));
  44             }else{
  45                 if(!c.xtbHidden && !this.isValidParent(c, side.childNodes[pos])){
  46                     var td = this.insertCell(c, side, pos);
  47                     td.appendChild(c.getPositionEl().dom);
  48                     c.container = Ext.get(td);
  49                 }
  50             }
  51         }
  52         //strip extra empty cells
  53         this.cleanup(this.leftTr);
  54         this.cleanup(this.rightTr);
  55         this.cleanup(this.extrasTr);
  56         this.fitToSize(target);
  57     },
  58
  59     cleanup : function(row){
  60         var cn = row.childNodes, i, c;
  61         for(i = cn.length-1; i >= 0 && (c = cn[i]); i--){
  62             if(!c.firstChild){
  63                 row.removeChild(c);
  64             }
  65         }
  66     },
  67
  68     insertCell : function(c, side, pos){
  69         var td = document.createElement('td');
  70         td.className='x-toolbar-cell';
  71         side.insertBefore(td, side.childNodes[pos]||null);
  72         return td;
  73     },
  74
  75     hideItem : function(item){
  76         var h = (this.hiddens = this.hiddens || []);
  77         h.push(item);
  78         item.xtbHidden = true;
  79         item.xtbWidth = item.getPositionEl().dom.parentNode.offsetWidth;
  80         item.hide();
  81     },
  82
  83     unhideItem : function(item){
  84         item.show();
  85         item.xtbHidden = false;
  86         this.hiddens.remove(item);
  87         if(this.hiddens.length < 1){
  88             delete this.hiddens;
  89         }
  90     },
  91
  92     getItemWidth : function(c){
  93         return c.hidden ? (c.xtbWidth || 0) : c.getPositionEl().dom.parentNode.offsetWidth;
  94     },
  95
  96     fitToSize : function(t){
  97         if(this.container.enableOverflow === false){
  98             return;
  99         }
 100         var w = t.dom.clientWidth,
 101             lw = this.lastWidth || 0,
 102             iw = t.dom.firstChild.offsetWidth,
 103             clipWidth = w - this.triggerWidth,
 104             hideIndex = -1;
 105
 106         this.lastWidth = w;
 107
 108         if(iw > w || (this.hiddens && w >= lw)){
 109             var i, items = this.container.items.items,
 110                 len = items.length, c,
 111                 loopWidth = 0;
 112
 113             for(i = 0; i < len; i++) {
 114                 c = items[i];
 115                 if(!c.isFill){
 116                     loopWidth += this.getItemWidth(c);
 117                     if(loopWidth > clipWidth){
 118                         if(!(c.hidden || c.xtbHidden)){
 119                             this.hideItem(c);
 120                         }
 121                     }else if(c.xtbHidden){
 122                         this.unhideItem(c);
 123                     }
 124                 }
 125             }
 126         }
 127         if(this.hiddens){
 128             this.initMore();
 129             if(!this.lastOverflow){
 130                 this.container.fireEvent('overflowchange', this.container, true);
 131                 this.lastOverflow = true;
 132             }
 133         }else if(this.more){
 134             this.clearMenu();
 135             this.more.destroy();
 136             delete this.more;
 137             if(this.lastOverflow){
 138                 this.container.fireEvent('overflowchange', this.container, false);
 139                 this.lastOverflow = false;
 140             }
 141         }
 142     },
 143
 144     createMenuConfig : function(c, hideOnClick){
 145         var cfg = Ext.apply({}, c.initialConfig),
 146             group = c.toggleGroup;
 147
 148         Ext.apply(cfg, {
 149             text: c.overflowText || c.text,
 150             iconCls: c.iconCls,
 151             icon: c.icon,
 152             itemId: c.itemId,
 153             disabled: c.disabled,
 154             handler: c.handler,
 155             scope: c.scope,
 156             menu: c.menu,
 157             hideOnClick: hideOnClick
 158         });
 159         if(group || c.enableToggle){
 160             Ext.apply(cfg, {
 161                 group: group,
 162                 checked: c.pressed,
 163                 listeners: {
 164                     checkchange: function(item, checked){
 165                         c.toggle(checked);
 166                     }
 167                 }
 168             });
 169         }
 170         delete cfg.ownerCt;
 171         delete cfg.xtype;
 172         delete cfg.id;
 173         return cfg;
 174     },
 175
 176     // private
 177     addComponentToMenu : function(m, c){
 178         if(c instanceof Ext.Toolbar.Separator){
 179             m.add('-');
 180         }else if(Ext.isFunction(c.isXType)){
 181             if(c.isXType('splitbutton')){
 182                 m.add(this.createMenuConfig(c, true));
 183             }else if(c.isXType('button')){
 184                 m.add(this.createMenuConfig(c, !c.menu));
 185             }else if(c.isXType('buttongroup')){
 186                 c.items.each(function(item){
 187                      this.addComponentToMenu(m, item);
 188                 }, this);
 189             }
 190         }
 191     },
 192
 193     clearMenu : function(){
 194         var m = this.moreMenu;
 195         if(m && m.items){
 196             m.items.each(function(item){
 197                 delete item.menu;
 198             });
 199         }
 200     },
 201
 202     // private
 203     beforeMoreShow : function(m){
 204         var h = this.container.items.items,
 205             len = h.length,
 206             c,
 207             prev,
 208             needsSep = function(group, item){
 209                 return group.isXType('buttongroup') && !(item instanceof Ext.Toolbar.Separator);
 210             };
 211
 212         this.clearMenu();
 213         m.removeAll();
 214         for(var i = 0; i < len; i++){
 215             c = h[i];
 216             if(c.xtbHidden){
 217                 if(prev && (needsSep(c, prev) || needsSep(prev, c))){
 218                     m.add('-');
 219                 }
 220                 this.addComponentToMenu(m, c);
 221                 prev = c;
 222             }
 223         }
 224         // put something so the menu isn't empty
 225         // if no compatible items found
 226         if(m.items.length < 1){
 227             m.add(this.noItemsMenuText);
 228         }
 229     },
 230
 231     initMore : function(){
 232         if(!this.more){
 233             this.moreMenu = new Ext.menu.Menu({
 234                 ownerCt : this.container,
 235                 listeners: {
 236                     beforeshow: this.beforeMoreShow,
 237                     scope: this
 238                 }
 239
 240             });
 241             this.more = new Ext.Button({
 242                 iconCls : 'x-toolbar-more-icon',
 243                 cls     : 'x-toolbar-more',
 244                 menu    : this.moreMenu,
 245                 ownerCt : this.container
 246             });
 247             var td = this.insertCell(this.more, this.extrasTr, 100);
 248             this.more.render(td);
 249         }
 250     },
 251
 252     destroy : function(){
 253         Ext.destroy(this.more, this.moreMenu);
 254         delete this.leftTr;
 255         delete this.rightTr;
 256         delete this.extrasTr;
 257         Ext.layout.ToolbarLayout.superclass.destroy.call(this);
 258     }
 259 });
 260
 261 Ext.Container.LAYOUTS.toolbar = Ext.layout.ToolbarLayout;</pre>    \r
 262 </body>\r
 263 </html>