examples/tabs/reorderable-tabs.js

   1 Ext.Loader.setConfig({enabled: true});
   2
   3 Ext.Loader.setPath('Ext.ux', '../ux/');
   4
   5 Ext.require([
   6     'Ext.tab.*',
   7     'Ext.ux.TabReorderer'
   8 ]);
   9
  10 Ext.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 });