docs/source/GroupTabPanel.html

   1 <html>\r
   2 <head>\r
   3   <title>The source code</title>\r
   4     <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />\r
   5     <script type="text/javascript" src="../resources/prettify/prettify.js"></script>\r
   6 </head>\r
   7 <body  onload="prettyPrint();">\r
   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 \r
  57         if(this.plain){\r
  58             var pos = this.tabPosition == 'top' ? 'header' : 'footer';\r
  59             this[pos].addClass('x-tab-panel-'+pos+'-plain');\r
  60         }\r
  61 \r
  62         var st = this[this.stripTarget];\r
  63 \r
  64         this.stripWrap = st.createChild({cls:'x-tab-strip-wrap ', cn:{\r
  65             tag:'ul', cls:'x-grouptabs-strip x-grouptabs-tab-strip-'+this.tabPosition}});\r
  66 \r
  67         var beforeEl = (this.tabPosition=='bottom' ? this.stripWrap : null);\r
  68         this.strip = new Ext.Element(this.stripWrap.dom.firstChild);\r
  69 \r
  70                 this.header.addClass('x-grouptabs-panel-header');\r
  71                 this.bwrap.addClass('x-grouptabs-bwrap');\r
  72         this.body.addClass('x-tab-panel-body-'+this.tabPosition + ' x-grouptabs-panel-body');\r
  73 \r
  74         if (!this.itemTpl) {\r
  75             var tt = new Ext.Template(\r
  76                 '<li class="{cls}" id="{id}">', \r
  77                 '<a class="x-grouptabs-expand" onclick="return false;"></a>', \r
  78                 '<a class="x-grouptabs-text {iconCls}" href="#" onclick="return false;">',\r
  79                 '<span>{text}</span></a>', \r
  80                 '</li>'\r
  81             );\r
  82             tt.disableFormats = true;\r
  83             tt.compile();\r
  84             Ext.ux.GroupTabPanel.prototype.itemTpl = tt;\r
  85         }\r
  86 \r
  87         this.items.each(this.initGroup, this);\r
  88     },\r
  89     \r
  90     afterRender: function(){\r
  91         Ext.ux.GroupTabPanel.superclass.afterRender.call(this);\r
  92         \r
  93         this.tabJoint = Ext.fly(this.body.dom.parentNode).createChild({\r
  94             cls: 'x-tab-joint'\r
  95         });\r
  96         \r
  97         this.addClass('x-tab-panel-' + this.tabPosition);\r
  98         this.header.setWidth(this.tabWidth);\r
  99         \r
 100         if (this.activeGroup !== undefined) {\r
 101             var group = (typeof this.activeGroup == 'object') ? this.activeGroup : this.items.get(this.activeGroup);\r
 102             delete this.activeGroup;\r
 103             this.setActiveGroup(group);\r
 104             group.setActiveTab(group.getMainItem());\r
 105         }\r
 106     },\r
 107 \r
 108     getGroupEl : Ext.TabPanel.prototype.getTabEl,\r
 109         \r
 110     // private\r
 111     findTargets: function(e){\r
 112         var item = null;\r
 113         var itemEl = e.getTarget('li', this.strip);\r
 114         if (itemEl) {\r
 115             item = this.findById(itemEl.id.split(this.idDelimiter)[1]);\r
 116             if (item.disabled) {\r
 117                 return {\r
 118                     expand: null,\r
 119                     item: null,\r
 120                     el: null\r
 121                 };\r
 122             }\r
 123         }\r
 124         return {\r
 125             expand: e.getTarget('.x-grouptabs-expand', this.strip),\r
 126             isGroup: !e.getTarget('ul.x-grouptabs-sub', this.strip),\r
 127             item: item,\r
 128             el: itemEl\r
 129         };\r
 130     },\r
 131     \r
 132     // private\r
 133     onStripMouseDown: function(e){\r
 134         if (e.button != 0) {\r
 135             return;\r
 136         }\r
 137         e.preventDefault();\r
 138         var t = this.findTargets(e);\r
 139         if (t.expand) {\r
 140             this.toggleGroup(t.el);\r
 141         }\r
 142         else if (t.item) {\r
 143             if(t.isGroup) {\r
 144                 t.item.setActiveTab(t.item.getMainItem());\r
 145             }\r
 146             else {\r
 147                 t.item.ownerCt.setActiveTab(t.item);\r
 148             }\r
 149         }\r
 150     },\r
 151     \r
 152     expandGroup: function(groupEl){\r
 153         if(groupEl.isXType) {\r
 154             groupEl = this.getGroupEl(groupEl);\r
 155         }\r
 156         Ext.fly(groupEl).addClass('x-grouptabs-expanded');\r
 157     },\r
 158     \r
 159     toggleGroup: function(groupEl){\r
 160         if(groupEl.isXType) {\r
 161             groupEl = this.getGroupEl(groupEl);\r
 162         }        \r
 163         Ext.fly(groupEl).toggleClass('x-grouptabs-expanded');\r
 164                 this.syncTabJoint();\r
 165     },    \r
 166     \r
 167     syncTabJoint: function(groupEl){\r
 168         if (!this.tabJoint) {\r
 169             return;\r
 170         }\r
 171         \r
 172         groupEl = groupEl || this.getGroupEl(this.activeGroup);\r
 173         if(groupEl) {\r
 174             this.tabJoint.setHeight(Ext.fly(groupEl).getHeight() - 2); \r
 175                         \r
 176             var y = Ext.isGecko2 ? 0 : 1;\r
 177             if (this.tabPosition == 'left'){\r
 178                 this.tabJoint.alignTo(groupEl, 'tl-tr', [-2,y]);\r
 179             }\r
 180             else {\r
 181                 this.tabJoint.alignTo(groupEl, 'tr-tl', [1,y]);\r
 182             }           \r
 183         }\r
 184         else {\r
 185             this.tabJoint.hide();\r
 186         }\r
 187     },\r
 188     \r
 189     getActiveTab : function() {\r
 190         if(!this.activeGroup) return null;\r
 191         return this.activeGroup.getTabEl(this.activeGroup.activeTab) || null;  \r
 192     },\r
 193     \r
 194     onResize: function(){\r
 195         Ext.ux.GroupTabPanel.superclass.onResize.apply(this, arguments);\r
 196         this.syncTabJoint();\r
 197     },\r
 198     \r
 199     createCorner: function(el, pos){\r
 200         return Ext.fly(el).createChild({\r
 201             cls: 'x-grouptabs-corner x-grouptabs-corner-' + pos\r
 202         });\r
 203     },\r
 204     \r
 205     initGroup: function(group, index){\r
 206         var before = this.strip.dom.childNodes[index];        \r
 207         var p = this.getTemplateArgs(group);\r
 208         if (index === 0) {\r
 209             p.cls += ' x-tab-first';\r
 210         }\r
 211         p.cls += ' x-grouptabs-main';\r
 212         p.text = group.getMainItem().title;\r
 213         \r
 214         var el = before ? this.itemTpl.insertBefore(before, p) : this.itemTpl.append(this.strip, p);\r
 215         \r
 216         var tl = this.createCorner(el, 'top-' + this.tabPosition);\r
 217         var bl = this.createCorner(el, 'bottom-' + this.tabPosition);\r
 218 \r
 219         if (group.expanded) {\r
 220             this.expandGroup(el);\r
 221         }\r
 222 \r
 223         if (Ext.isIE6 || (Ext.isIE && !Ext.isStrict)){\r
 224             bl.setLeft('-10px');\r
 225             bl.setBottom('-5px');\r
 226             tl.setLeft('-10px');\r
 227             tl.setTop('-5px');\r
 228         }\r
 229 \r
 230         this.mon(group, 'changemainitem', this.onGroupChangeMainItem, this);\r
 231         this.mon(group, 'beforetabchange', this.onGroupBeforeTabChange, this);\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.activeTab);\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>    \r
 289 </body>\r
 290 </html>