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