/ext-4.1.0_b3/examples/tabs/reorderable-tabs.js

 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});