Upgrade to ExtJS 4.0.0 - Released 04/26/2011

[extjs.git] / examples / tabs / reorderable-tabs.js

diff --git a/examples/tabs/reorderable-tabs.js b/examples/tabs/reorderable-tabs.js
new file mode 100755 (executable)
index 0000000..70ac560
--- /dev/null
+++ b/examples/tabs/reorderable-tabs.js
@@ -0,0 +1,87 @@
+Ext.Loader.setConfig({enabled: true});
+
+Ext.Loader.setPath('Ext.ux', '../ux/');
+
+Ext.require([
+    'Ext.tab.*',
+    'Ext.ux.TabReorderer'
+]);
+
+Ext.onReady(function() {
+    var tabCount = 4;
+
+    var tabPanel = Ext.create('Ext.tab.Panel', {
+        renderTo: Ext.getBody(),
+        width: 600,
+        height: 400,
+        //plain: true,
+        bodyStyle: 'padding:5px',
+        plugins: Ext.create('Ext.ux.TabReorderer'),
+        items: [{
+            xtype: 'panel',
+            title: 'Tab 1',
+            html : 'Test 1',
+            closable: true
+        }, {
+            xtype: 'panel',
+            title: 'Tab 2',
+            html : 'Test 2',
+            closable: true
+        }, {
+            xtype: 'panel',
+            title: 'Tab 3',
+            html : 'Test 3',
+            closable: true
+        }, {
+            xtype: 'panel',
+            title: 'Non Reorderable',
+            html : "I can't be moved",
+            reorderable: false,
+            closable: true
+        
+        },{
+            xtype: 'panel',
+            title: 'Tab 4',
+            html : 'Test 4',
+            closable: true
+        }],
+
+        dockedItems: {
+            dock: 'bottom',
+            xtype: 'toolbar',
+            items: [{
+                text : 'Add an item',
+                handler: function() {
+                    tabCount++;
+
+                    tabPanel.add({
+                        xtype: 'panel',
+                        title: 'Tab ' + tabCount,
+                        html : 'Content for tab ' + tabCount,
+                        closable: true
+                    });
+                }
+            }, {
+                text: 'Toggle tabs enabled',
+                handler: function() {
+                    tabPanel.tabBar.items.each(function(tab) {
+                        if (tab.disabled) {
+                            tab.enable();
+                        } else {
+                            tab.disable();
+                        }
+                    });
+                }
+            }, {
+                text: 'Remove 2nd item',
+                handler: function() {
+                    var item = tabPanel.items.items[1];
+
+                    if (item) {
+                        tabPanel.remove(item);
+                    }
+                }
+            }]
+        }
+    });
+});
\ No newline at end of file