3 * Copyright(c) 2006-2010 Ext JS, Inc.
5 * http://www.extjs.com/license
7 Ext.ux.GroupTab = Ext.extend(Ext.Container, {
24 initComponent: function(config){
25 Ext.apply(this, config);
28 Ext.ux.GroupTab.superclass.initComponent.call(this);
30 this.addEvents('activate', 'deactivate', 'changemainitem', 'beforetabchange', 'tabchange');
32 this.setLayout(new Ext.layout.CardLayout({
33 deferredRender: this.deferredRender
37 this.stack = Ext.TabPanel.AccessStack();
42 this.on('beforerender', function(){
43 this.groupEl = this.ownerCt.getGroupEl(this);
46 this.on('add', this.onAdd, this, {
49 this.on('remove', this.onRemove, this, {
53 if (this.mainItem !== undefined) {
54 var item = (typeof this.mainItem == 'object') ? this.mainItem : this.items.get(this.mainItem);
56 this.setMainItem(item);
61 * Sets the specified tab as the active tab. This method fires the {@link #beforetabchange} event which
62 * can return false to cancel the tab change.
63 * @param {String/Panel} tab The id or tab Panel to activate
65 setActiveTab : function(item){
66 item = this.getComponent(item);
71 this.activeTab = item;
74 if(this.activeTab != item && this.fireEvent('beforetabchange', this, item, this.activeTab) !== false){
75 if(this.activeTab && this.activeTab != this.mainItem){
76 var oldEl = this.getTabEl(this.activeTab);
78 Ext.fly(oldEl).removeClass('x-grouptabs-strip-active');
81 var el = this.getTabEl(item);
82 Ext.fly(el).addClass('x-grouptabs-strip-active');
83 this.activeTab = item;
86 this.layout.setActiveItem(item);
87 if(this.layoutOnTabChange && item.doLayout){
91 this.scrollToTab(item, this.animScroll);
94 this.fireEvent('tabchange', this, item);
100 getTabEl: function(item){
101 if (item == this.mainItem) {
104 return Ext.TabPanel.prototype.getTabEl.call(this, item);
107 onRender: function(ct, position){
108 Ext.ux.GroupTab.superclass.onRender.call(this, ct, position);
110 this.strip = Ext.fly(this.groupEl).createChild({
112 cls: 'x-grouptabs-sub'
115 this.tooltip = new Ext.ToolTip({
116 target: this.groupEl,
117 delegate: 'a.x-grouptabs-text',
119 renderTo: document.body,
121 beforeshow: function(tip) {
122 var item = (tip.triggerElement.parentNode === this.mainItem.tabEl)
124 : this.findById(tip.triggerElement.parentNode.id.split(this.idDelimiter)[1]);
129 tip.body.dom.innerHTML = item.tabTip;
136 var tt = new Ext.Template('<li class="{cls}" id="{id}">', '<a onclick="return false;" class="x-grouptabs-text {iconCls}">{text}</a>', '</li>');
137 tt.disableFormats = true;
139 Ext.ux.GroupTab.prototype.itemTpl = tt;
142 this.items.each(this.initTab, this);
145 afterRender: function(){
146 Ext.ux.GroupTab.superclass.afterRender.call(this);
148 if (this.activeTab !== undefined) {
149 var item = (typeof this.activeTab == 'object') ? this.activeTab : this.items.get(this.activeTab);
150 delete this.activeTab;
151 this.setActiveTab(item);
156 initTab: function(item, index){
157 var before = this.strip.dom.childNodes[index];
158 var p = Ext.TabPanel.prototype.getTemplateArgs.call(this, item);
160 if (item === this.mainItem) {
161 item.tabEl = this.groupEl;
162 p.cls += ' x-grouptabs-main-item';
165 var el = before ? this.itemTpl.insertBefore(before, p) : this.itemTpl.append(this.strip, p);
167 item.tabEl = item.tabEl || el;
169 item.on('disable', this.onItemDisabled, this);
170 item.on('enable', this.onItemEnabled, this);
171 item.on('titlechange', this.onItemTitleChanged, this);
172 item.on('iconchange', this.onItemIconChanged, this);
173 item.on('beforeshow', this.onBeforeShowItem, this);
176 setMainItem: function(item){
177 item = this.getComponent(item);
178 if (!item || this.fireEvent('changemainitem', this, item, this.mainItem) === false) {
182 this.mainItem = item;
185 getMainItem: function(){
186 return this.mainItem || null;
190 onBeforeShowItem: function(item){
191 if (item != this.activeTab) {
192 this.setActiveTab(item);
198 onAdd: function(gt, item, index){
200 this.initTab.call(this, item, index);
205 onRemove: function(tp, item){
206 Ext.destroy(Ext.get(this.getTabEl(item)));
207 this.stack.remove(item);
208 item.un('disable', this.onItemDisabled, this);
209 item.un('enable', this.onItemEnabled, this);
210 item.un('titlechange', this.onItemTitleChanged, this);
211 item.un('iconchange', this.onItemIconChanged, this);
212 item.un('beforeshow', this.onBeforeShowItem, this);
213 if (item == this.activeTab) {
214 var next = this.stack.next();
216 this.setActiveTab(next);
218 else if (this.items.getCount() > 0) {
219 this.setActiveTab(0);
222 this.activeTab = null;
228 onBeforeAdd: function(item){
229 var existing = item.events ? (this.items.containsKey(item.getItemId()) ? item : null) : this.items.get(item);
231 this.setActiveTab(item);
234 Ext.TabPanel.superclass.onBeforeAdd.apply(this, arguments);
235 var es = item.elements;
236 item.elements = es ? es.replace(',header', '') : es;
237 item.border = (item.border === true);
241 onItemDisabled: Ext.TabPanel.prototype.onItemDisabled,
242 onItemEnabled: Ext.TabPanel.prototype.onItemEnabled,
245 onItemTitleChanged: function(item){
246 var el = this.getTabEl(item);
248 Ext.fly(el).child('a.x-grouptabs-text', true).innerHTML = item.title;
253 onItemIconChanged: function(item, iconCls, oldCls){
254 var el = this.getTabEl(item);
256 Ext.fly(el).child('a.x-grouptabs-text').replaceClass(oldCls, iconCls);
260 beforeDestroy: function(){
261 Ext.TabPanel.prototype.beforeDestroy.call(this);
262 this.tooltip.destroy();
266 Ext.reg('grouptab', Ext.ux.GroupTab);