examples/ux/GroupTabPanel.js

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