examples/ux/GroupTab.js

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