/ext-4.1.0_b3/examples/tabs/reorderable-tabs.js
JavaScript | 87 lines | 78 code | 8 blank | 1 comment | 4 complexity | 0c5a611cba9fdeb9c647ec0c6aeced2a MD5 | raw file
1Ext.Loader.setConfig({enabled: true});
2
3Ext.Loader.setPath('Ext.ux', '../ux/');
4
5Ext.require([
6 'Ext.tab.*',
7 'Ext.ux.TabReorderer'
8]);
9
10Ext.onReady(function() {
11 var tabCount = 4;
12
13 var tabPanel = Ext.create('Ext.tab.Panel', {
14 renderTo: Ext.getBody(),
15 width: 600,
16 height: 400,
17 //plain: true,
18 bodyStyle: 'padding:5px',
19 plugins: Ext.create('Ext.ux.TabReorderer'),
20 items: [{
21 xtype: 'panel',
22 title: 'Tab 1',
23 html : 'Test 1',
24 closable: true
25 }, {
26 xtype: 'panel',
27 title: 'Tab 2',
28 html : 'Test 2',
29 closable: true
30 }, {
31 xtype: 'panel',
32 title: 'Tab 3',
33 html : 'Test 3',
34 closable: true
35 }, {
36 xtype: 'panel',
37 title: 'Non Reorderable',
38 html : "I can't be moved",
39 reorderable: false,
40 closable: true
41
42 },{
43 xtype: 'panel',
44 title: 'Tab 4',
45 html : 'Test 4',
46 closable: true
47 }],
48
49 dockedItems: {
50 dock: 'bottom',
51 xtype: 'toolbar',
52 items: [{
53 text : 'Add an item',
54 handler: function() {
55 tabCount++;
56
57 tabPanel.add({
58 xtype: 'panel',
59 title: 'Tab ' + tabCount,
60 html : 'Content for tab ' + tabCount,
61 closable: true
62 });
63 }
64 }, {
65 text: 'Toggle tabs enabled',
66 handler: function() {
67 tabPanel.tabBar.items.each(function(tab) {
68 if (tab.disabled) {
69 tab.enable();
70 } else {
71 tab.disable();
72 }
73 });
74 }
75 }, {
76 text: 'Remove 2nd item',
77 handler: function() {
78 var item = tabPanel.items.items[1];
79
80 if (item) {
81 tabPanel.remove(item);
82 }
83 }
84 }]
85 }
86 });
87});