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