examples/ux/GroupTabPanel.js

   1 /*!
   2  * Ext JS Library 3.1.0
   3  * Copyright(c) 2006-2009 Ext JS, LLC
   4  * licensing@extjs.com
   5  * http://www.extjs.com/license
   6  */
   7 Ext.ns('Ext.ux');\r
   8 \r
   9 Ext.ux.GroupTabPanel = Ext.extend(Ext.TabPanel, {\r
  10     tabPosition: 'left',\r
  11     \r
  12     alternateColor: false,\r
  13     \r
  14     alternateCls: 'x-grouptabs-panel-alt',\r
  15     \r
  16     defaultType: 'grouptab',\r
  17     \r
  18     deferredRender: false,\r
  19     \r
  20     activeGroup : null,\r
  21     \r
  22     initComponent: function(){\r
  23         Ext.ux.GroupTabPanel.superclass.initComponent.call(this);\r
  24         \r
  25         this.addEvents(\r
  26             'beforegroupchange',\r
  27             'groupchange'\r
  28         );\r
  29         this.elements = 'body,header';\r
  30         this.stripTarget = 'header';\r
  31         \r
  32         this.tabPosition = this.tabPosition == 'right' ? 'right' : 'left';\r
  33         \r
  34         this.addClass('x-grouptabs-panel');\r
  35         \r
  36         if (this.tabStyle && this.tabStyle != '') {\r
  37             this.addClass('x-grouptabs-panel-' + this.tabStyle);\r
  38         }\r
  39         \r
  40         if (this.alternateColor) {\r
  41             this.addClass(this.alternateCls);\r
  42         }\r
  43         \r
  44         this.on('beforeadd', function(gtp, item, index){\r
  45             this.initGroup(item, index);\r
  46         });                  \r
  47     },\r
  48     \r
  49     initEvents : function() {\r
  50         this.mon(this.strip, 'mousedown', this.onStripMouseDown, this);\r
  51     },\r
  52         \r
  53     onRender: function(ct, position){\r
  54         Ext.TabPanel.superclass.onRender.call(this, ct, position);\r
  55         if(this.plain){\r
  56             var pos = this.tabPosition == 'top' ? 'header' : 'footer';\r
  57             this[pos].addClass('x-tab-panel-'+pos+'-plain');\r
  58         }\r
  59 \r
  60         var st = this[this.stripTarget];\r
  61 \r
  62         this.stripWrap = st.createChild({cls:'x-tab-strip-wrap ', cn:{\r
  63             tag:'ul', cls:'x-grouptabs-strip x-grouptabs-tab-strip-'+this.tabPosition}});\r
  64 \r
  65         var beforeEl = (this.tabPosition=='bottom' ? this.stripWrap : null);\r
  66         this.strip = new Ext.Element(this.stripWrap.dom.firstChild);\r
  67 \r
  68                 this.header.addClass('x-grouptabs-panel-header');\r
  69                 this.bwrap.addClass('x-grouptabs-bwrap');\r
  70         this.body.addClass('x-tab-panel-body-'+this.tabPosition + ' x-grouptabs-panel-body');\r
  71 \r
  72         if (!this.groupTpl) {\r
  73             var tt = new Ext.Template(\r
  74                 '<li class="{cls}" id="{id}">', \r
  75                 '<a class="x-grouptabs-expand" onclick="return false;"></a>', \r
  76                 '<a class="x-grouptabs-text {iconCls}" href="#" onclick="return false;">',\r
  77                 '<span>{text}</span></a>', \r
  78                 '</li>'\r
  79             );\r
  80             tt.disableFormats = true;\r
  81             tt.compile();\r
  82             Ext.ux.GroupTabPanel.prototype.groupTpl = tt;\r
  83         }\r
  84         this.items.each(this.initGroup, this);\r
  85     },\r
  86     \r
  87     afterRender: function(){\r
  88         Ext.ux.GroupTabPanel.superclass.afterRender.call(this);\r
  89         \r
  90         this.tabJoint = Ext.fly(this.body.dom.parentNode).createChild({\r
  91             cls: 'x-tab-joint'\r
  92         });\r
  93         \r
  94         this.addClass('x-tab-panel-' + this.tabPosition);\r
  95         this.header.setWidth(this.tabWidth);\r
  96         \r
  97         if (this.activeGroup !== undefined) {\r
  98             var group = (typeof this.activeGroup == 'object') ? this.activeGroup : this.items.get(this.activeGroup);\r
  99             delete this.activeGroup;\r
 100             this.setActiveGroup(group);\r
 101             group.setActiveTab(group.getMainItem());\r
 102         }\r
 103     },\r
 104 \r
 105     getGroupEl : Ext.TabPanel.prototype.getTabEl,\r
 106         \r
 107     // private\r
 108     findTargets: function(e){\r
 109         var item = null,\r
 110             itemEl = e.getTarget('li', this.strip);\r
 111         if (itemEl) {\r
 112             item = this.findById(itemEl.id.split(this.idDelimiter)[1]);\r
 113             if (item.disabled) {\r
 114                 return {\r
 115                     expand: null,\r
 116                     item: null,\r
 117                     el: null\r
 118                 };\r
 119             }\r
 120         }\r
 121         return {\r
 122             expand: e.getTarget('.x-grouptabs-expand', this.strip),\r
 123             isGroup: !e.getTarget('ul.x-grouptabs-sub', this.strip),\r
 124             item: item,\r
 125             el: itemEl\r
 126         };\r
 127     },\r
 128     \r
 129     // private\r
 130     onStripMouseDown: function(e){\r
 131         if (e.button != 0) {\r
 132             return;\r
 133         }\r
 134         e.preventDefault();\r
 135         var t = this.findTargets(e);\r
 136         if (t.expand) {\r
 137             this.toggleGroup(t.el);\r
 138         }\r
 139         else if (t.item) {\r
 140             if(t.isGroup) {\r
 141                 t.item.setActiveTab(t.item.getMainItem());\r
 142             }\r
 143             else {\r
 144                 t.item.ownerCt.setActiveTab(t.item);\r
 145             }\r
 146         }\r
 147     },\r
 148     \r
 149     expandGroup: function(groupEl){\r
 150         if(groupEl.isXType) {\r
 151             groupEl = this.getGroupEl(groupEl);\r
 152         }\r
 153         Ext.fly(groupEl).addClass('x-grouptabs-expanded');\r
 154                 this.syncTabJoint();\r
 155     },\r
 156     \r
 157     toggleGroup: function(groupEl){\r
 158         if(groupEl.isXType) {\r
 159             groupEl = this.getGroupEl(groupEl);\r
 160         }        \r
 161         Ext.fly(groupEl).toggleClass('x-grouptabs-expanded');\r
 162                 this.syncTabJoint();\r
 163     },    \r
 164 \r
 165     collapseGroup: function(groupEl){\r
 166         if(groupEl.isXType) {\r
 167             groupEl = this.getGroupEl(groupEl);\r
 168         }\r
 169         Ext.fly(groupEl).removeClass('x-grouptabs-expanded');\r
 170                 this.syncTabJoint();\r
 171     },\r
 172         \r
 173     syncTabJoint: function(groupEl){\r
 174         if (!this.tabJoint) {\r
 175             return;\r
 176         }\r
 177         \r
 178         groupEl = groupEl || this.getGroupEl(this.activeGroup);\r
 179         if(groupEl) {\r
 180             this.tabJoint.setHeight(Ext.fly(groupEl).getHeight() - 2); \r
 181                         \r
 182             var y = Ext.isGecko2 ? 0 : 1;\r
 183             if (this.tabPosition == 'left'){\r
 184                 this.tabJoint.alignTo(groupEl, 'tl-tr', [-2,y]);\r
 185             }\r
 186             else {\r
 187                 this.tabJoint.alignTo(groupEl, 'tr-tl', [1,y]);\r
 188             }           \r
 189         }\r
 190         else {\r
 191             this.tabJoint.hide();\r
 192         }\r
 193     },\r
 194     \r
 195     getActiveTab : function() {\r
 196         if(!this.activeGroup) return null;\r
 197         return this.activeGroup.getTabEl(this.activeGroup.activeTab) || null;  \r
 198     },\r
 199     \r
 200     onResize: function(){\r
 201         Ext.ux.GroupTabPanel.superclass.onResize.apply(this, arguments);\r
 202         this.syncTabJoint();\r
 203     },\r
 204     \r
 205     createCorner: function(el, pos){\r
 206         return Ext.fly(el).createChild({\r
 207             cls: 'x-grouptabs-corner x-grouptabs-corner-' + pos\r
 208         });\r
 209     },\r
 210     \r
 211     initGroup: function(group, index){\r
 212         var before = this.strip.dom.childNodes[index],   \r
 213             p = this.getTemplateArgs(group);\r
 214         if (index === 0) {\r
 215             p.cls += ' x-tab-first';\r
 216         }\r
 217         p.cls += ' x-grouptabs-main';\r
 218         p.text = group.getMainItem().title;\r
 219         \r
 220         var el = before ? this.groupTpl.insertBefore(before, p) : this.groupTpl.append(this.strip, p),\r
 221             tl = this.createCorner(el, 'top-' + this.tabPosition),\r
 222             bl = this.createCorner(el, 'bottom-' + this.tabPosition);\r
 223 \r
 224         group.tabEl = el;\r
 225         if (group.expanded) {\r
 226             this.expandGroup(el);\r
 227         }\r
 228 \r
 229         if (Ext.isIE6 || (Ext.isIE && !Ext.isStrict)){\r
 230             bl.setLeft('-10px');\r
 231             bl.setBottom('-5px');\r
 232             tl.setLeft('-10px');\r
 233             tl.setTop('-5px');\r
 234         }\r
 235 \r
 236         this.mon(group, {\r
 237             scope: this,\r
 238             changemainitem: this.onGroupChangeMainItem,\r
 239             beforetabchange: this.onGroupBeforeTabChange\r
 240         });\r
 241     },\r
 242     \r
 243     setActiveGroup : function(group) {\r
 244         group = this.getComponent(group);\r
 245         if(!group){\r
 246             return false;\r
 247         }\r
 248         if(!this.rendered){\r
 249             this.activeGroup = group;\r
 250             return true;\r
 251         }\r
 252         if(this.activeGroup != group && this.fireEvent('beforegroupchange', this, group, this.activeGroup) !== false){\r
 253             if(this.activeGroup){\r
 254                 var oldEl = this.getGroupEl(this.activeGroup);\r
 255                 if(oldEl){\r
 256                     Ext.fly(oldEl).removeClass('x-grouptabs-strip-active');\r
 257                 }\r
 258             }\r
 259 \r
 260             var groupEl = this.getGroupEl(group);\r
 261             Ext.fly(groupEl).addClass('x-grouptabs-strip-active');\r
 262                         \r
 263             this.activeGroup = group;\r
 264             this.stack.add(group);\r
 265 \r
 266             this.layout.setActiveItem(group);\r
 267             this.syncTabJoint(groupEl);\r
 268 \r
 269             this.fireEvent('groupchange', this, group);\r
 270             return true;\r
 271         }\r
 272         return false; \r
 273     },\r
 274     \r
 275     onGroupBeforeTabChange: function(group, newTab, oldTab){\r
 276         if(group !== this.activeGroup || newTab !== oldTab) {\r
 277             this.strip.select('.x-grouptabs-sub > li.x-grouptabs-strip-active', true).removeClass('x-grouptabs-strip-active');\r
 278         } \r
 279         this.expandGroup(this.getGroupEl(group));\r
 280         if(group !== this.activeGroup) {\r
 281             return this.setActiveGroup(group);\r
 282         }        \r
 283     },\r
 284     \r
 285     getFrameHeight: function(){\r
 286         var h = this.el.getFrameWidth('tb');\r
 287         h += (this.tbar ? this.tbar.getHeight() : 0) +\r
 288         (this.bbar ? this.bbar.getHeight() : 0);\r
 289         \r
 290         return h;\r
 291     },\r
 292     \r
 293     adjustBodyWidth: function(w){\r
 294         return w - this.tabWidth;\r
 295     }\r
 296 });\r
 297 \r
 298 Ext.reg('grouptabpanel', Ext.ux.GroupTabPanel);