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