examples/ux/TabReorderer.js

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