Bar.html
9.93 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>The source code</title>
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
<style type="text/css">
.highlight { display: block; background-color: #ddd; }
</style>
<script type="text/javascript">
function highlight() {
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
}
</script>
</head>
<body onload="prettyPrint(); highlight();">
<pre class="prettyprint lang-js"><span id='Ext-tab-Bar'>/**
</span> * @author Ed Spencer
* TabBar is used internally by a {@link Ext.tab.Panel TabPanel} and typically should not need to be created manually.
* The tab bar automatically removes the default title provided by {@link Ext.panel.Header}
*/
Ext.define('Ext.tab.Bar', {
extend: 'Ext.panel.Header',
alias: 'widget.tabbar',
baseCls: Ext.baseCSSPrefix + 'tab-bar',
requires: ['Ext.tab.Tab'],
<span id='Ext-tab-Bar-property-isTabBar'> /**
</span> * @property {Boolean} isTabBar
* `true` in this class to identify an objact as an instantiated Tab Bar, or subclass thereof.
*/
isTabBar: true,
<span id='Ext-tab-Bar-cfg-title'> /**
</span> * @cfg {String} title @hide
*/
<span id='Ext-tab-Bar-cfg-iconCls'> /**
</span> * @cfg {String} iconCls @hide
*/
// @private
defaultType: 'tab',
<span id='Ext-tab-Bar-cfg-plain'> /**
</span> * @cfg {Boolean} plain
* True to not show the full background on the tabbar
*/
plain: false,
childEls: [
'body', 'strip'
],
// @private
renderTpl: [
'<div id="{id}-body" class="{baseCls}-body {bodyCls}<tpl if="ui"> {baseCls}-body-{ui}<tpl for="uiCls"> {parent.baseCls}-body-{parent.ui}-{.}</tpl></tpl>"<tpl if="bodyStyle"> style="{bodyStyle}"</tpl>>',
'{%this.renderContainer(out,values)%}',
'</div>',
'<div id="{id}-strip" class="{baseCls}-strip<tpl if="ui"> {baseCls}-strip-{ui}<tpl for="uiCls"> {parent.baseCls}-strip-{parent.ui}-{.}</tpl></tpl>"></div>'
],
<span id='Ext-tab-Bar-cfg-minTabWidth'> /**
</span> * @cfg {Number} minTabWidth
* The minimum width for a tab in this tab Bar. Defaults to the tab Panel's {@link Ext.tab.Panel#minTabWidth minTabWidth} value.
* @deprecated This config is deprecated. It is much easier to use the {@link Ext.tab.Panel#minTabWidth minTabWidth} config on the TabPanel.
*/
<span id='Ext-tab-Bar-cfg-maxTabWidth'> /**
</span> * @cfg {Number} maxTabWidth
* The maximum width for a tab in this tab Bar. Defaults to the tab Panel's {@link Ext.tab.Panel#maxTabWidth maxTabWidth} value.
* @deprecated This config is deprecated. It is much easier to use the {@link Ext.tab.Panel#maxTabWidth maxTabWidth} config on the TabPanel.
*/
// @private
initComponent: function() {
var me = this;
if (me.plain) {
me.setUI(me.ui + '-plain');
}
me.addClsWithUI(me.dock);
me.addEvents(
<span id='Ext-tab-Bar-event-change'> /**
</span> * @event change
* Fired when the currently-active tab has changed
* @param {Ext.tab.Bar} tabBar The TabBar
* @param {Ext.tab.Tab} tab The new Tab
* @param {Ext.Component} card The card that was just shown in the TabPanel
*/
'change'
);
// Element onClick listener added by Header base class
me.callParent(arguments);
// TabBar must override the Header's align setting.
me.layout.align = (me.orientation == 'vertical') ? 'left' : 'top';
me.layout.overflowHandler = new Ext.layout.container.boxOverflow.Scroller(me.layout);
me.remove(me.titleCmp);
delete me.titleCmp;
Ext.apply(me.renderData, {
bodyCls: me.bodyCls
});
},
getLayout: function() {
var me = this;
me.layout.type = (me.dock === 'top' || me.dock === 'bottom') ? 'hbox' : 'vbox';
return me.callParent(arguments);
},
// @private
onAdd: function(tab) {
tab.position = this.dock;
this.callParent(arguments);
},
onRemove: function(tab) {
var me = this;
if (tab === me.previousTab) {
me.previousTab = null;
}
me.callParent(arguments);
},
afterComponentLayout : function(width) {
this.callParent(arguments);
this.strip.setWidth(width);
},
// @private
onClick: function(e, target) {
// The target might not be a valid tab el.
var me = this,
tabEl = e.getTarget('.' + Ext.tab.Tab.prototype.baseCls),
tab = tabEl && Ext.getCmp(tabEl.id),
tabPanel = me.tabPanel,
isCloseClick = tab && tab.closeEl && (target === tab.closeEl.dom);
if (isCloseClick) {
e.preventDefault();
}
if (tab && tab.isDisabled && !tab.isDisabled()) {
if (tab.closable && isCloseClick) {
tab.onCloseClick();
} else {
if (tabPanel) {
// TabPanel will card setActiveTab of the TabBar
tabPanel.setActiveTab(tab.card);
} else {
me.setActiveTab(tab);
}
tab.focus();
}
}
},
<span id='Ext-tab-Bar-method-closeTab'> /**
</span> * @private
* Closes the given tab by removing it from the TabBar and removing the corresponding card from the TabPanel
* @param {Ext.tab.Tab} toClose The tab to close
*/
closeTab: function(toClose) {
var me = this,
card = toClose.card,
tabPanel = me.tabPanel,
toActivate;
if (card && card.fireEvent('beforeclose', card) === false) {
return false;
}
// If we are closing the active tab, revert to the previously active tab (or the previous or next enabled sibling if
// there *is* no previously active tab, or the previously active tab is the one that's being closed or the previously
// active tab has since been disabled)
toActivate = me.findNextActivatable(toClose);
// We are going to remove the associated card, and then, if that was sucessful, remove the Tab,
// And then potentially activate another Tab. We should not layout for each of these operations.
Ext.suspendLayouts();
if (tabPanel && card) {
// Remove the ownerCt so the tab doesn't get destroyed if the remove is successful
// We need this so we can have the tab fire it's own close event.
delete toClose.ownerCt;
// we must fire 'close' before removing the card from panel, otherwise
// the event will no loger have any listener
card.fireEvent('close', card);
tabPanel.remove(card);
// Remove succeeded
if (!tabPanel.getComponent(card)) {
/*
* Force the close event to fire. By the time this function returns,
* the tab is already destroyed and all listeners have been purged
* so the tab can't fire itself.
*/
toClose.fireClose();
me.remove(toClose);
} else {
// Restore the ownerCt from above
toClose.ownerCt = me;
Ext.resumeLayouts(true);
return false;
}
}
// If we are closing the active tab, revert to the previously active tab (or the previous sibling or the nnext sibling)
if (toActivate) {
// Our owning TabPanel calls our setActiveTab method, so only call that if this Bar is being used
// in some other context (unlikely)
if (tabPanel) {
tabPanel.setActiveTab(toActivate.card);
} else {
me.setActiveTab(toActivate);
}
toActivate.focus();
}
Ext.resumeLayouts(true);
},
// private - used by TabPanel too.
// Works out the next tab to activate when one tab is closed.
findNextActivatable: function(toClose) {
var me = this;
if (toClose.active && me.items.getCount() > 1) {
return (me.previousTab && me.previousTab !== toClose && !me.previousTab.disabled) ? me.previousTab : (toClose.next('tab[disabled=false]') || toClose.prev('tab[disabled=false]'));
}
},
<span id='Ext-tab-Bar-method-setActiveTab'> /**
</span> * @private
* Marks the given tab as active
* @param {Ext.tab.Tab} tab The tab to mark active
*/
setActiveTab: function(tab) {
var me = this;
if (!tab.disabled && tab !== me.activeTab) {
if (me.activeTab) {
if (me.activeTab.isDestroyed) {
me.previousTab = null;
} else {
me.previousTab = me.activeTab;
me.activeTab.deactivate();
}
}
tab.activate();
me.activeTab = tab;
me.fireEvent('change', me, tab, tab.card);
// Ensure that after the currently in progress layout, the active tab is scrolled into view
me.on({
afterlayout: me.afterTabActivate,
scope: me,
single: true
});
me.updateLayout();
}
},
afterTabActivate: function() {
this.layout.overflowHandler.scrollToItem(this.activeTab);
}
});
</pre>
</body>
</html>