extjs/packages/ux/classic/src/TabReorderer.js

   1 /**
   2  * This plugin allow you to reorder tabs of a TabPanel.
   3  */
   4 Ext.define('Ext.ux.TabReorderer', {
   5
   6     extend: 'Ext.ux.BoxReorderer',
   7     alias: 'plugin.tabreorderer',
   8
   9     itemSelector: '.' + Ext.baseCSSPrefix + 'tab',
  10
  11     init: function(tabPanel) {
  12         var me = this;
  13
  14         me.callParent([tabPanel.getTabBar()]);
  15
  16         // Ensure reorderable property is copied into dynamically added tabs
  17         tabPanel.onAdd = Ext.Function.createSequence(tabPanel.onAdd, me.onAdd);
  18     },
  19
  20     onBoxReady: function() {
  21         var tabs,
  22             len,
  23             i = 0,
  24             tab;
  25
  26         this.callParent(arguments);
  27
  28         // Copy reorderable property from card into tab
  29         for (tabs = this.container.items.items, len = tabs.length; i < len; i++) {
  30             tab = tabs[i];
  31             if (tab.card) {
  32                 tab.reorderable = tab.card.reorderable;
  33             }
  34         }
  35     },
  36
  37     onAdd: function(card, index) {
  38         card.tab.reorderable = card.reorderable;
  39     },
  40
  41     afterBoxReflow: function() {
  42         var me = this;
  43
  44         // Cannot use callParent, this is not called in the scope of this plugin, but that of its Ext.dd.DD object
  45         Ext.ux.BoxReorderer.prototype.afterBoxReflow.apply(me, arguments);
  46
  47         // Move the associated card to match the tab order
  48         if (me.dragCmp) {
  49             me.container.tabPanel.setActiveTab(me.dragCmp.card);
  50             me.container.tabPanel.move(me.dragCmp.card, me.curIndex);
  51         }
  52     }
  53 });