3 * Copyright(c) 2006-2010 Sencha Inc.
5 * http://www.sencha.com/license
8 * @class Ext.layout.boxOverflow.Menu
9 * @extends Ext.layout.boxOverflow.None
12 Ext.layout.boxOverflow.Menu = Ext.extend(Ext.layout.boxOverflow.None, {
16 * CSS class added to the afterCt element. This is the element that holds any special items such as scrollers,
17 * which must always be present at the rightmost edge of the Container
19 afterCls: 'x-strip-right',
22 * @property noItemsMenuText
24 * HTML fragment to render into the toolbar overflow menu if there are no items to display
26 noItemsMenuText : '<div class="x-toolbar-no-items">(None)</div>',
28 constructor: function(layout) {
29 Ext.layout.boxOverflow.Menu.superclass.constructor.apply(this, arguments);
34 * Array of all items that are currently hidden and should go into the dropdown menu
41 * Creates the beforeCt, innerCt and afterCt elements if they have not already been created
42 * @param {Ext.Container} container The Container attached to this Layout instance
43 * @param {Ext.Element} target The target Element
45 createInnerElements: function() {
47 this.afterCt = this.layout.innerCt.insertSibling({cls: this.afterCls}, 'before');
54 clearOverflow: function(calculations, targetSize) {
55 var newWidth = targetSize.width + (this.afterCt ? this.afterCt.getWidth() : 0),
56 items = this.menuItems;
60 for (var index = 0, length = items.length; index < length; index++) {
61 items.pop().component.show();
66 height: targetSize.height,
75 showTrigger: function() {
77 this.menuTrigger.show();
83 hideTrigger: function() {
84 if (this.menuTrigger != undefined) {
85 this.menuTrigger.hide();
91 * Called before the overflow menu is shown. This constructs the menu's items, caching them for as long as it can.
93 beforeMenuShow: function(menu) {
94 var items = this.menuItems,
99 var needsSep = function(group, item){
100 return group.isXType('buttongroup') && !(item instanceof Ext.Toolbar.Separator);
106 for (var i = 0; i < len; i++) {
107 item = items[i].component;
109 if (prev && (needsSep(item, prev) || needsSep(prev, item))) {
113 this.addComponentToMenu(menu, item);
117 // put something so the menu isn't empty if no compatible items found
118 if (menu.items.length < 1) {
119 menu.add(this.noItemsMenuText);
125 * Returns a menu config for a given component. This config is used to create a menu item
126 * to be added to the expander menu
127 * @param {Ext.Component} component The component to create the config for
128 * @param {Boolean} hideOnClick Passed through to the menu item
130 createMenuConfig : function(component, hideOnClick){
131 var config = Ext.apply({}, component.initialConfig),
132 group = component.toggleGroup;
134 Ext.copyTo(config, component, [
135 'iconCls', 'icon', 'itemId', 'disabled', 'handler', 'scope', 'menu'
139 text : component.overflowText || component.text,
140 hideOnClick: hideOnClick
143 if (group || component.enableToggle) {
146 checked: component.pressed,
148 checkchange: function(item, checked){
149 component.toggle(checked);
155 delete config.ownerCt;
164 * Adds the given Toolbar item to the given menu. Buttons inside a buttongroup are added individually.
165 * @param {Ext.menu.Menu} menu The menu to add to
166 * @param {Ext.Component} component The component to add
168 addComponentToMenu : function(menu, component) {
169 if (component instanceof Ext.Toolbar.Separator) {
172 } else if (Ext.isFunction(component.isXType)) {
173 if (component.isXType('splitbutton')) {
174 menu.add(this.createMenuConfig(component, true));
176 } else if (component.isXType('button')) {
177 menu.add(this.createMenuConfig(component, !component.menu));
179 } else if (component.isXType('buttongroup')) {
180 component.items.each(function(item){
181 this.addComponentToMenu(menu, item);
189 * Deletes the sub-menu of each item in the expander menu. Submenus are created for items such as
190 * splitbuttons and buttongroups, where the Toolbar item cannot be represented by a single menu item
192 clearMenu : function(){
193 var menu = this.moreMenu;
194 if (menu && menu.items) {
195 menu.items.each(function(item){
203 * Creates the overflow trigger and menu used when enableOverflow is set to true and the items
204 * in the layout are too wide to fit in the space available
206 createMenu: function() {
207 if (!this.menuTrigger) {
208 this.createInnerElements();
213 * @type Ext.menu.Menu
214 * The expand menu - holds items for every item that cannot be shown
215 * because the container is currently not large enough.
217 this.menu = new Ext.menu.Menu({
218 ownerCt : this.layout.container,
221 beforeshow: this.beforeMenuShow
227 * @property menuTrigger
229 * The expand button which triggers the overflow menu to be shown
231 this.menuTrigger = new Ext.Button({
232 iconCls : 'x-toolbar-more-icon',
233 cls : 'x-toolbar-more',
235 renderTo: this.afterCt
243 destroy: function() {
244 Ext.destroy(this.menu, this.menuTrigger);
248 Ext.layout.boxOverflow.menu = Ext.layout.boxOverflow.Menu;
252 * @class Ext.layout.boxOverflow.HorizontalMenu
253 * @extends Ext.layout.boxOverflow.Menu
256 Ext.layout.boxOverflow.HorizontalMenu = Ext.extend(Ext.layout.boxOverflow.Menu, {
258 constructor: function() {
259 Ext.layout.boxOverflow.HorizontalMenu.superclass.constructor.apply(this, arguments);
263 origFunction = layout.calculateChildBoxes;
265 layout.calculateChildBoxes = function(visibleItems, targetSize) {
266 var calcs = origFunction.apply(layout, arguments),
268 items = me.menuItems;
270 //calculate the width of the items currently hidden solely because there is not enough space
273 for (var index = 0, length = items.length; index < length; index++) {
274 hiddenWidth += items[index].width;
277 meta.minimumWidth += hiddenWidth;
278 meta.tooNarrow = meta.minimumWidth > targetSize.width;
284 handleOverflow: function(calculations, targetSize) {
287 var newWidth = targetSize.width - this.afterCt.getWidth(),
288 boxes = calculations.boxes,
292 //calculate the width of all visible items and any spare width
293 for (var index = 0, length = boxes.length; index < length; index++) {
294 usedWidth += boxes[index].width;
297 var spareWidth = newWidth - usedWidth,
300 //see if we can re-show any of the hidden components
301 for (var index = 0, length = this.menuItems.length; index < length; index++) {
302 var hidden = this.menuItems[index],
303 comp = hidden.component,
304 width = hidden.width;
306 if (width < spareWidth) {
318 this.menuItems = this.menuItems.slice(showCount);
320 for (var i = boxes.length - 1; i >= 0; i--) {
321 var item = boxes[i].component,
322 right = boxes[i].left + boxes[i].width;
324 if (right >= newWidth) {
325 this.menuItems.unshift({
327 width : boxes[i].width
337 if (this.menuItems.length == 0) {
343 height: targetSize.height,
346 recalculate: recalculate
351 Ext.layout.boxOverflow.menu.hbox = Ext.layout.boxOverflow.HorizontalMenu;