/ext-4.1.0_b3/docs/extjs/examples/ux/TabCloseMenu.js

https://bitbucket.org/srogerf/javascript · JavaScript · 211 lines · 138 code · 38 blank · 35 comment · 18 complexity · bf3a377fae7450ff453d6d3d1ad08f07 MD5 · raw file

  1. /**
  2. * Plugin for adding a close context menu to tabs. Note that the menu respects
  3. * the closable configuration on the tab. As such, commands like remove others
  4. * and remove all will not remove items that are not closable.
  5. */
  6. Ext.define('Ext.ux.TabCloseMenu', {
  7. alias: 'plugin.tabclosemenu',
  8. mixins: {
  9. observable: 'Ext.util.Observable'
  10. },
  11. /**
  12. * @cfg {String} closeTabText
  13. * The text for closing the current tab.
  14. */
  15. closeTabText: 'Close Tab',
  16. /**
  17. * @cfg {Boolean} showCloseOthers
  18. * Indicates whether to show the 'Close Others' option.
  19. */
  20. showCloseOthers: true,
  21. /**
  22. * @cfg {String} closeOtherTabsText
  23. * The text for closing all tabs except the current one.
  24. */
  25. closeOthersTabsText: 'Close Other Tabs',
  26. /**
  27. * @cfg {Boolean} showCloseAll
  28. * Indicates whether to show the 'Close All' option.
  29. */
  30. showCloseAll: true,
  31. /**
  32. * @cfg {String} closeAllTabsText
  33. * <p>The text for closing all tabs.
  34. */
  35. closeAllTabsText: 'Close All Tabs',
  36. /**
  37. * @cfg {Array} extraItemsHead
  38. * An array of additional context menu items to add to the front of the context menu.
  39. */
  40. extraItemsHead: null,
  41. /**
  42. * @cfg {Array} extraItemsTail
  43. * An array of additional context menu items to add to the end of the context menu.
  44. */
  45. extraItemsTail: null,
  46. //public
  47. constructor: function (config) {
  48. this.addEvents(
  49. 'aftermenu',
  50. 'beforemenu');
  51. this.mixins.observable.constructor.call(this, config);
  52. },
  53. init : function(tabpanel){
  54. this.tabPanel = tabpanel;
  55. this.tabBar = tabpanel.down("tabbar");
  56. this.mon(this.tabPanel, {
  57. scope: this,
  58. afterlayout: this.onAfterLayout,
  59. single: true
  60. });
  61. },
  62. onAfterLayout: function() {
  63. this.mon(this.tabBar.el, {
  64. scope: this,
  65. contextmenu: this.onContextMenu,
  66. delegate: 'div.x-tab'
  67. });
  68. },
  69. onBeforeDestroy : function(){
  70. Ext.destroy(this.menu);
  71. this.callParent(arguments);
  72. },
  73. // private
  74. onContextMenu : function(event, target){
  75. var me = this,
  76. menu = me.createMenu(),
  77. disableAll = true,
  78. disableOthers = true,
  79. tab = me.tabBar.getChildByElement(target),
  80. index = me.tabBar.items.indexOf(tab);
  81. me.item = me.tabPanel.getComponent(index);
  82. menu.child('*[text="' + me.closeTabText + '"]').setDisabled(!me.item.closable);
  83. if (me.showCloseAll || me.showCloseOthers) {
  84. me.tabPanel.items.each(function(item) {
  85. if (item.closable) {
  86. disableAll = false;
  87. if (item != me.item) {
  88. disableOthers = false;
  89. return false;
  90. }
  91. }
  92. return true;
  93. });
  94. if (me.showCloseAll) {
  95. menu.child('*[text="' + me.closeAllTabsText + '"]').setDisabled(disableAll);
  96. }
  97. if (me.showCloseOthers) {
  98. menu.child('*[text="' + me.closeOthersTabsText + '"]').setDisabled(disableOthers);
  99. }
  100. }
  101. event.preventDefault();
  102. me.fireEvent('beforemenu', menu, me.item, me);
  103. menu.showAt(event.getXY());
  104. },
  105. createMenu : function() {
  106. var me = this;
  107. if (!me.menu) {
  108. var items = [{
  109. text: me.closeTabText,
  110. scope: me,
  111. handler: me.onClose
  112. }];
  113. if (me.showCloseAll || me.showCloseOthers) {
  114. items.push('-');
  115. }
  116. if (me.showCloseOthers) {
  117. items.push({
  118. text: me.closeOthersTabsText,
  119. scope: me,
  120. handler: me.onCloseOthers
  121. });
  122. }
  123. if (me.showCloseAll) {
  124. items.push({
  125. text: me.closeAllTabsText,
  126. scope: me,
  127. handler: me.onCloseAll
  128. });
  129. }
  130. if (me.extraItemsHead) {
  131. items = me.extraItemsHead.concat(items);
  132. }
  133. if (me.extraItemsTail) {
  134. items = items.concat(me.extraItemsTail);
  135. }
  136. me.menu = Ext.create('Ext.menu.Menu', {
  137. items: items,
  138. listeners: {
  139. hide: me.onHideMenu,
  140. scope: me
  141. }
  142. });
  143. }
  144. return me.menu;
  145. },
  146. onHideMenu: function () {
  147. var me = this;
  148. me.item = null;
  149. me.fireEvent('aftermenu', me.menu, me);
  150. },
  151. onClose : function(){
  152. this.tabPanel.remove(this.item);
  153. },
  154. onCloseOthers : function(){
  155. this.doClose(true);
  156. },
  157. onCloseAll : function(){
  158. this.doClose(false);
  159. },
  160. doClose : function(excludeActive){
  161. var items = [];
  162. this.tabPanel.items.each(function(item){
  163. if(item.closable){
  164. if(!excludeActive || item != this.item){
  165. items.push(item);
  166. }
  167. }
  168. }, this);
  169. Ext.each(items, function(item){
  170. this.tabPanel.remove(item);
  171. }, this);
  172. }
  173. });