TabScrollerMenu.js
上传用户:shuoshiled
上传日期:2018-01-28
资源大小:10124k
文件大小:4k
源码类别:

中间件编程

开发平台:

JavaScript

  1. /*!
  2.  * Ext JS Library 3.0.0
  3.  * Copyright(c) 2006-2009 Ext JS, LLC
  4.  * licensing@extjs.com
  5.  * http://www.extjs.com/license
  6.  */
  7. Ext.ux.TabScrollerMenu =  Ext.extend(Object, {
  8. pageSize       : 10,
  9. maxText        : 15,
  10. menuPrefixText : 'Items',
  11. constructor    : function(config) {
  12. config = config || {};
  13. Ext.apply(this, config);
  14. },
  15. init : function(tabPanel) {
  16. Ext.apply(tabPanel, this.tabPanelMethods);
  17. tabPanel.tabScrollerMenu = this;
  18. var thisRef = this;
  19. tabPanel.on({
  20. render : {
  21. scope  : tabPanel,
  22. single : true,
  23. fn     : function() { 
  24. var newFn = tabPanel.createScrollers.createSequence(thisRef.createPanelsMenu, this);
  25. tabPanel.createScrollers = newFn;
  26. }
  27. }
  28. });
  29. },
  30. // private && sequeneced
  31. createPanelsMenu : function() {
  32. var h = this.stripWrap.dom.offsetHeight;
  33. //move the right menu item to the left 18px
  34. var rtScrBtn = this.header.dom.firstChild;
  35. Ext.fly(rtScrBtn).applyStyles({
  36. right : '18px'
  37. });
  38. var stripWrap = Ext.get(this.strip.dom.parentNode);
  39. stripWrap.applyStyles({
  40.  'margin-right' : '36px'
  41. });
  42. // Add the new righthand menu
  43. var scrollMenu = this.header.insertFirst({
  44. cls:'x-tab-tabmenu-right'
  45. });
  46. scrollMenu.setHeight(h);
  47. scrollMenu.addClassOnOver('x-tab-tabmenu-over');
  48. scrollMenu.on('click', this.showTabsMenu, this);
  49. this.scrollLeft.show = this.scrollLeft.show.createSequence(function() {
  50. scrollMenu.show();    
  51. });
  52. this.scrollLeft.hide = this.scrollLeft.hide.createSequence(function() {
  53. scrollMenu.hide();
  54. });
  55. },
  56. // public
  57. getPageSize : function() {
  58. return this.pageSize;
  59. },
  60. // public
  61. setPageSize : function(pageSize) {
  62. this.pageSize = pageSize;
  63. },
  64. // public
  65. getMaxText : function() {
  66. return this.maxText;
  67. },
  68. // public
  69. setMaxText : function(t) {
  70. this.maxText = t;
  71. },
  72. getMenuPrefixText : function() {
  73. return this.menuPrefixText;
  74. },
  75. setMenuPrefixText : function(t) {
  76. this.menuPrefixText = t;
  77. },
  78. // private && applied to the tab panel itself.
  79. tabPanelMethods : {
  80. // all execute within the scope of the tab panel
  81. // private
  82. showTabsMenu : function(e) {
  83. if (! this.tabsMenu) {
  84. this.tabsMenu =  new Ext.menu.Menu();
  85. this.on('beforedestroy', this.tabsMenu.destroy, this.tabsMenu);
  86. }
  87. this.tabsMenu.removeAll();
  88. this.generateTabMenuItems();
  89. var target = Ext.get(e.getTarget());
  90. var xy     = target.getXY();
  91. //Y param + 24 pixels
  92. xy[1] += 24;
  93. this.tabsMenu.showAt(xy);
  94. },
  95. // private
  96. generateTabMenuItems : function() {
  97. var curActive  = this.getActiveTab();
  98. var totalItems = this.items.getCount();
  99. var pageSize   = this.tabScrollerMenu.getPageSize();
  100. if (totalItems > pageSize)  {
  101. var numSubMenus = Math.floor(totalItems / pageSize);
  102. var remainder   = totalItems % pageSize;
  103. // Loop through all of the items and create submenus in chunks of 10
  104. for (var i = 0 ; i < numSubMenus; i++) {
  105. var curPage = (i + 1) * pageSize;
  106. var menuItems = [];
  107. for (var x = 0; x < pageSize; x++) {
  108. index = x + curPage - pageSize;
  109. var item = this.items.get(index);
  110. menuItems.push(this.autoGenMenuItem(item));
  111. }
  112. this.tabsMenu.add({
  113. text : this.tabScrollerMenu.getMenuPrefixText() + ' '  + (curPage - pageSize + 1) + ' - ' + curPage,
  114. menu : menuItems
  115. });
  116. }
  117. // remaining items
  118. if (remainder > 0) {
  119. var start = numSubMenus * pageSize;
  120. menuItems = [];
  121. for (var i = start ; i < totalItems; i ++ ) {
  122. var item = this.items.get(i);
  123. menuItems.push(this.autoGenMenuItem(item));
  124. }
  125. this.tabsMenu.add({
  126. text : this.tabScrollerMenu.menuPrefixText  + ' ' + (start + 1) + ' - ' + (start + menuItems.length),
  127. menu : menuItems
  128. });
  129. }
  130. }
  131. else {
  132. this.items.each(function(item) {
  133. if (item.id != curActive.id && ! item.hidden) {
  134. menuItems.push(this.autoGenMenuItem(item));
  135. }
  136. }, this);
  137. }
  138. },
  139. // private
  140. autoGenMenuItem : function(item) {
  141. var maxText = this.tabScrollerMenu.getMaxText();
  142. var text    = Ext.util.Format.ellipsis(item.title, maxText);
  143. return {
  144. text      : text,
  145. handler   : this.showTabFromMenu,
  146. scope     : this,
  147. disabled  : item.disabled,
  148. tabToShow : item,
  149. iconCls   : item.iconCls
  150. }
  151. },
  152. // private
  153. showTabFromMenu : function(menuItem) {
  154. this.setActiveTab(menuItem.tabToShow);
  155. }
  156. }
  157. });