examples/docs/source/GroupTabPanel.html

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