3 * Copyright(c) 2006-2010 Sencha Inc.
5 * http://www.sencha.com/license
9 Ext.ux.GroupTabPanel = Ext.extend(Ext.TabPanel, {
12 alternateColor: false,
14 alternateCls: 'x-grouptabs-panel-alt',
16 defaultType: 'grouptab',
18 deferredRender: false,
22 initComponent: function(){
23 Ext.ux.GroupTabPanel.superclass.initComponent.call(this);
29 this.elements = 'body,header';
30 this.stripTarget = 'header';
32 this.tabPosition = this.tabPosition == 'right' ? 'right' : 'left';
34 this.addClass('x-grouptabs-panel');
36 if (this.tabStyle && this.tabStyle != '') {
37 this.addClass('x-grouptabs-panel-' + this.tabStyle);
40 if (this.alternateColor) {
41 this.addClass(this.alternateCls);
44 this.on('beforeadd', function(gtp, item, index){
45 this.initGroup(item, index);
47 this.items.each(function(item){
48 item.on('tabchange',function(item){
49 this.fireEvent('tabchange', this, item.activeTab);
54 initEvents : function() {
55 this.mon(this.strip, 'mousedown', this.onStripMouseDown, this);
58 onRender: function(ct, position){
59 Ext.TabPanel.superclass.onRender.call(this, ct, position);
61 var pos = this.tabPosition == 'top' ? 'header' : 'footer';
62 this[pos].addClass('x-tab-panel-'+pos+'-plain');
65 var st = this[this.stripTarget];
67 this.stripWrap = st.createChild({cls:'x-tab-strip-wrap ', cn:{
68 tag:'ul', cls:'x-grouptabs-strip x-grouptabs-tab-strip-'+this.tabPosition}});
70 var beforeEl = (this.tabPosition=='bottom' ? this.stripWrap : null);
71 this.strip = new Ext.Element(this.stripWrap.dom.firstChild);
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');
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>',
85 tt.disableFormats = true;
87 Ext.ux.GroupTabPanel.prototype.groupTpl = tt;
89 this.items.each(this.initGroup, this);
92 afterRender: function(){
93 Ext.ux.GroupTabPanel.superclass.afterRender.call(this);
95 this.tabJoint = Ext.fly(this.body.dom.parentNode).createChild({
99 this.addClass('x-tab-panel-' + this.tabPosition);
100 this.header.setWidth(this.tabWidth);
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());
110 getGroupEl : Ext.TabPanel.prototype.getTabEl,
113 findTargets: function(e){
115 itemEl = e.getTarget('li', this.strip);
117 item = this.findById(itemEl.id.split(this.idDelimiter)[1]);
127 expand: e.getTarget('.x-grouptabs-expand', this.strip),
128 isGroup: !e.getTarget('ul.x-grouptabs-sub', this.strip),
135 onStripMouseDown: function(e){
140 var t = this.findTargets(e);
142 this.toggleGroup(t.el);
146 t.item.setActiveTab(t.item.getMainItem());
149 t.item.ownerCt.setActiveTab(t.item);
154 expandGroup: function(groupEl){
155 if(groupEl.isXType) {
156 groupEl = this.getGroupEl(groupEl);
158 Ext.fly(groupEl).addClass('x-grouptabs-expanded');
162 toggleGroup: function(groupEl){
163 if(groupEl.isXType) {
164 groupEl = this.getGroupEl(groupEl);
166 Ext.fly(groupEl).toggleClass('x-grouptabs-expanded');
170 collapseGroup: function(groupEl){
171 if(groupEl.isXType) {
172 groupEl = this.getGroupEl(groupEl);
174 Ext.fly(groupEl).removeClass('x-grouptabs-expanded');
178 syncTabJoint: function(groupEl){
179 if (!this.tabJoint) {
183 groupEl = groupEl || this.getGroupEl(this.activeGroup);
185 this.tabJoint.setHeight(Ext.fly(groupEl).getHeight() - 2);
187 var y = Ext.isGecko2 ? 0 : 1;
188 if (this.tabPosition == 'left'){
189 this.tabJoint.alignTo(groupEl, 'tl-tr', [-2,y]);
192 this.tabJoint.alignTo(groupEl, 'tr-tl', [1,y]);
196 this.tabJoint.hide();
200 getActiveTab : function() {
201 if(!this.activeGroup) return null;
202 return this.activeGroup.getTabEl(this.activeGroup.activeTab) || null;
205 onResize: function(){
206 Ext.ux.GroupTabPanel.superclass.onResize.apply(this, arguments);
210 createCorner: function(el, pos){
211 return Ext.fly(el).createChild({
212 cls: 'x-grouptabs-corner x-grouptabs-corner-' + pos
216 initGroup: function(group, index){
217 var before = this.strip.dom.childNodes[index],
218 p = this.getTemplateArgs(group);
220 p.cls += ' x-tab-first';
222 p.cls += ' x-grouptabs-main';
223 p.text = group.getMainItem().title;
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);
230 if (group.expanded) {
231 this.expandGroup(el);
234 if (Ext.isIE6 || (Ext.isIE && !Ext.isStrict)){
236 bl.setBottom('-5px');
243 changemainitem: this.onGroupChangeMainItem,
244 beforetabchange: this.onGroupBeforeTabChange
248 setActiveGroup : function(group) {
249 group = this.getComponent(group);
254 this.activeGroup = group;
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);
262 Ext.fly(oldEl).removeClass('x-grouptabs-strip-active');
266 var groupEl = this.getGroupEl(group);
267 Ext.fly(groupEl).addClass('x-grouptabs-strip-active');
269 this.activeGroup = group;
270 this.stack.add(group);
272 this.layout.setActiveItem(group);
273 this.syncTabJoint(groupEl);
275 this.fireEvent('groupchange', this, group);
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');
285 this.expandGroup(this.getGroupEl(group));
286 if(group !== this.activeGroup) {
287 return this.setActiveGroup(group);
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);
299 adjustBodyWidth: function(w){
300 return w - this.tabWidth;
304 Ext.reg('grouptabpanel', Ext.ux.GroupTabPanel);