TabReorderer.html 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>The source code</title>
  6. <link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
  7. <script type="text/javascript" src="../resources/prettify/prettify.js"></script>
  8. <style type="text/css">
  9. .highlight { display: block; background-color: #ddd; }
  10. </style>
  11. <script type="text/javascript">
  12. function highlight() {
  13. document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
  14. }
  15. </script>
  16. </head>
  17. <body onload="prettyPrint(); highlight();">
  18. <pre class="prettyprint lang-js"><span id='Ext-ux-TabReorderer'>/**
  19. </span> * This plugin allow you to reorder tabs of a TabPanel.
  20. */
  21. Ext.define('Ext.ux.TabReorderer', {
  22. extend: 'Ext.ux.BoxReorderer',
  23. itemSelector: '.x-tab',
  24. init: function(tabPanel) {
  25. var me = this;
  26. me.callParent([tabPanel.getTabBar()]);
  27. // Ensure reorderable property is copied into dynamically added tabs
  28. tabPanel.onAdd = Ext.Function.createSequence(tabPanel.onAdd, me.onAdd);
  29. },
  30. afterFirstLayout: function() {
  31. var tabs,
  32. len,
  33. i = 0,
  34. tab;
  35. this.callParent(arguments);
  36. // Copy reorderable property from card into tab
  37. for (tabs = this.container.items.items, len = tabs.length; i &lt; len; i++) {
  38. tab = tabs[i];
  39. if (tab.card) {
  40. tab.reorderable = tab.card.reorderable;
  41. }
  42. }
  43. },
  44. onAdd: function(card, index) {
  45. card.tab.reorderable = card.reorderable;
  46. },
  47. afterBoxReflow: function() {
  48. var me = this;
  49. // Cannot use callParent, this is not called in the scope of this plugin, but that of its Ext.dd.DD object
  50. Ext.ux.BoxReorderer.prototype.afterBoxReflow.apply(me, arguments);
  51. // Move the associated card to match the tab order
  52. if (me.dragCmp) {
  53. me.container.tabPanel.setActiveTab(me.dragCmp.card);
  54. me.container.tabPanel.move(me.startIndex, me.curIndex);
  55. }
  56. }
  57. });</pre>
  58. </body>
  59. </html>