tabs-adv.js
2.52 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
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../ux/');
Ext.require([
'Ext.tab.*',
'Ext.ux.TabCloseMenu'
]);
Ext.onReady(function() {
var currentItem;
var tabs = Ext.widget('tabpanel', {
renderTo: 'tabs',
resizeTabs: true,
enableTabScroll: true,
width: 600,
height: 250,
defaults: {
autoScroll: true,
bodyPadding: 10
},
items: [{
title: 'Tab 1',
iconCls: 'tabs',
html: 'Tab Body<br/><br/>' + Ext.example.bogusMarkup,
closable: true
}],
plugins: Ext.create('Ext.ux.TabCloseMenu', {
extraItemsTail: [
'-',
{
text: 'Closable',
checked: true,
hideOnClick: true,
handler: function (item) {
currentItem.tab.setClosable(item.checked);
}
},
'-',
{
text: 'Enabled',
checked: true,
hideOnClick: true,
handler: function(item) {
currentItem.tab.setDisabled(!item.checked);
}
}
],
listeners: {
aftermenu: function () {
currentItem = null;
},
beforemenu: function (menu, item) {
menu.child('[text="Closable"]').setChecked(item.closable);
menu.child('[text="Enabled"]').setChecked(!item.tab.isDisabled());
currentItem = item;
}
}
})
});
// tab generation code
var index = 0;
while(index < 3) {
addTab(index % 2);
}
function addTab (closable) {
++index;
tabs.add({
closable: !!closable,
html: 'Tab Body ' + index + '<br/><br/>' + Ext.example.bogusMarkup,
iconCls: 'tabs',
title: 'New Tab ' + index
}).show();
}
Ext.widget('button', {
iconCls: 'new-tab',
renderTo: 'addButtonCt',
text: 'Add Closable Tab',
handler: function () {
addTab(true);
}
});
Ext.widget('button', {
iconCls:'new-tab',
renderTo: 'addButtonCt',
style: 'margin-left: 8px;',
text: 'Add Unclosable Tab',
handler: function () {
addTab(false);
}
});
});