docs/source/GroupTab.html

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