TabCloseMenu.html 6.4 KB

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