examples/docs/source/GroupTab.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 Ext.ux.GroupTab = Ext.extend(Ext.Container, {
  16     mainItem: 0,
  17
  18     expanded: true,
  19
  20     deferredRender: true,
  21
  22     activeTab: null,
  23
  24     idDelimiter: '__',
  25
  26     headerAsText: false,
  27
  28     frame: false,
  29
  30     hideBorders: true,
  31
  32     initComponent: function(config){
  33         Ext.apply(this, config);
  34         this.frame = false;
  35
  36         Ext.ux.GroupTab.superclass.initComponent.call(this);
  37
  38         this.addEvents('activate', 'deactivate', 'changemainitem', 'beforetabchange', 'tabchange');
  39
  40         this.setLayout(new Ext.layout.CardLayout({
  41             deferredRender: this.deferredRender
  42         }));
  43
  44         if (!this.stack) {
  45             this.stack = Ext.TabPanel.AccessStack();
  46         }
  47
  48         this.initItems();
  49
  50         this.on('beforerender', function(){
  51             this.groupEl = this.ownerCt.getGroupEl(this);
  52         }, this);
  53
  54         this.on('add', this.onAdd, this, {
  55             target: this
  56         });
  57         this.on('remove', this.onRemove, this, {
  58             target: this
  59         });
  60
  61         if (this.mainItem !== undefined) {
  62             var item = (typeof this.mainItem == 'object') ? this.mainItem : this.items.get(this.mainItem);
  63             delete this.mainItem;
  64             this.setMainItem(item);
  65         }
  66     },
  67
  68     <div id="method-Ext.ux.tree.ColumnNodeUI-setActiveTab"></div>/**
  69      * Sets the specified tab as the active tab. This method fires the {@link #beforetabchange} event which
  70      * can return false to cancel the tab change.
  71      * @param {String/Panel} tab The id or tab Panel to activate
  72      */
  73     setActiveTab : function(item){
  74         item = this.getComponent(item);
  75         if(!item){
  76             return false;
  77         }
  78         if(!this.rendered){
  79             this.activeTab = item;
  80             return true;
  81         }
  82         if(this.activeTab != item && this.fireEvent('beforetabchange', this, item, this.activeTab) !== false){
  83             if(this.activeTab && this.activeTab != this.mainItem){
  84                 var oldEl = this.getTabEl(this.activeTab);
  85                 if(oldEl){
  86                     Ext.fly(oldEl).removeClass('x-grouptabs-strip-active');
  87                 }
  88             }
  89             var el = this.getTabEl(item);
  90             Ext.fly(el).addClass('x-grouptabs-strip-active');
  91             this.activeTab = item;
  92             this.stack.add(item);
  93
  94             this.layout.setActiveItem(item);
  95             if(this.layoutOnTabChange && item.doLayout){
  96                 item.doLayout();
  97             }
  98             if(this.scrolling){
  99                 this.scrollToTab(item, this.animScroll);
 100             }
 101
 102             this.fireEvent('tabchange', this, item);
 103             return true;
 104         }
 105         return false;
 106     },
 107
 108     getTabEl: function(item){
 109         if (item == this.mainItem) {
 110             return this.groupEl;
 111         }
 112         return Ext.TabPanel.prototype.getTabEl.call(this, item);
 113     },
 114
 115     onRender: function(ct, position){
 116         Ext.ux.GroupTab.superclass.onRender.call(this, ct, position);
 117
 118         this.strip = Ext.fly(this.groupEl).createChild({
 119             tag: 'ul',
 120             cls: 'x-grouptabs-sub'
 121         });
 122
 123         this.tooltip = new Ext.ToolTip({
 124            target: this.groupEl,
 125            delegate: 'a.x-grouptabs-text',
 126            trackMouse: true,
 127            renderTo: document.body,
 128            listeners: {
 129                beforeshow: function(tip) {
 130                    var item = (tip.triggerElement.parentNode === this.mainItem.tabEl)
 131                        ? this.mainItem
 132                        : this.findById(tip.triggerElement.parentNode.id.split(this.idDelimiter)[1]);
 133
 134                    if(!item.tabTip) {
 135                        return false;
 136                    }
 137                    tip.body.dom.innerHTML = item.tabTip;
 138                },
 139                scope: this
 140            }
 141         });
 142
 143         if (!this.itemTpl) {
 144             var tt = new Ext.Template('<li class="{cls}" id="{id}">', '<a onclick="return false;" class="x-grouptabs-text {iconCls}">{text}</a>', '</li>');
 145             tt.disableFormats = true;
 146             tt.compile();
 147             Ext.ux.GroupTab.prototype.itemTpl = tt;
 148         }
 149
 150         this.items.each(this.initTab, this);
 151     },
 152
 153     afterRender: function(){
 154         Ext.ux.GroupTab.superclass.afterRender.call(this);
 155
 156         if (this.activeTab !== undefined) {
 157             var item = (typeof this.activeTab == 'object') ? this.activeTab : this.items.get(this.activeTab);
 158             delete this.activeTab;
 159             this.setActiveTab(item);
 160         }
 161     },
 162
 163     // private
 164     initTab: function(item, index){
 165         var before = this.strip.dom.childNodes[index];
 166         var p = Ext.TabPanel.prototype.getTemplateArgs.call(this, item);
 167
 168         if (item === this.mainItem) {
 169             item.tabEl = this.groupEl;
 170             p.cls += ' x-grouptabs-main-item';
 171         }
 172
 173         var el = before ? this.itemTpl.insertBefore(before, p) : this.itemTpl.append(this.strip, p);
 174
 175         item.tabEl = item.tabEl || el;
 176
 177         item.on('disable', this.onItemDisabled, this);
 178         item.on('enable', this.onItemEnabled, this);
 179         item.on('titlechange', this.onItemTitleChanged, this);
 180         item.on('iconchange', this.onItemIconChanged, this);
 181         item.on('beforeshow', this.onBeforeShowItem, this);
 182     },
 183
 184     setMainItem: function(item){
 185         item = this.getComponent(item);
 186         if (!item || this.fireEvent('changemainitem', this, item, this.mainItem) === false) {
 187             return;
 188         }
 189
 190         this.mainItem = item;
 191     },
 192
 193     getMainItem: function(){
 194         return this.mainItem || null;
 195     },
 196
 197     // private
 198     onBeforeShowItem: function(item){
 199         if (item != this.activeTab) {
 200             this.setActiveTab(item);
 201             return false;
 202         }
 203     },
 204
 205     // private
 206     onAdd: function(gt, item, index){
 207         if (this.rendered) {
 208             this.initTab.call(this, item, index);
 209         }
 210     },
 211
 212     // private
 213     onRemove: function(tp, item){
 214         Ext.destroy(Ext.get(this.getTabEl(item)));
 215         this.stack.remove(item);
 216         item.un('disable', this.onItemDisabled, this);
 217         item.un('enable', this.onItemEnabled, this);
 218         item.un('titlechange', this.onItemTitleChanged, this);
 219         item.un('iconchange', this.onItemIconChanged, this);
 220         item.un('beforeshow', this.onBeforeShowItem, this);
 221         if (item == this.activeTab) {
 222             var next = this.stack.next();
 223             if (next) {
 224                 this.setActiveTab(next);
 225             }
 226             else if (this.items.getCount() > 0) {
 227                 this.setActiveTab(0);
 228             }
 229             else {
 230                 this.activeTab = null;
 231             }
 232         }
 233     },
 234
 235     // private
 236     onBeforeAdd: function(item){
 237         var existing = item.events ? (this.items.containsKey(item.getItemId()) ? item : null) : this.items.get(item);
 238         if (existing) {
 239             this.setActiveTab(item);
 240             return false;
 241         }
 242         Ext.TabPanel.superclass.onBeforeAdd.apply(this, arguments);
 243         var es = item.elements;
 244         item.elements = es ? es.replace(',header', '') : es;
 245         item.border = (item.border === true);
 246     },
 247
 248     // private
 249     onItemDisabled: Ext.TabPanel.prototype.onItemDisabled,
 250     onItemEnabled: Ext.TabPanel.prototype.onItemEnabled,
 251
 252     // private
 253     onItemTitleChanged: function(item){
 254         var el = this.getTabEl(item);
 255         if (el) {
 256             Ext.fly(el).child('a.x-grouptabs-text', true).innerHTML = item.title;
 257         }
 258     },
 259
 260     //private
 261     onItemIconChanged: function(item, iconCls, oldCls){
 262         var el = this.getTabEl(item);
 263         if (el) {
 264             Ext.fly(el).child('a.x-grouptabs-text').replaceClass(oldCls, iconCls);
 265         }
 266     },
 267
 268     beforeDestroy: function(){
 269         Ext.TabPanel.prototype.beforeDestroy.call(this);
 270         this.tooltip.destroy();
 271     }
 272 });
 273
 274 Ext.reg('grouptab', Ext.ux.GroupTab);
 275 </pre>
 276 </body>
 277 </html>