3 * Copyright(c) 2006-2010 Ext JS, Inc.
5 * http://www.extjs.com/license
8 * @class Ext.layout.ToolbarLayout
9 * @extends Ext.layout.ContainerLayout
10 * Layout manager used by Ext.Toolbar. This is highly specialised for use by Toolbars and would not
11 * usually be used by any other class.
13 Ext.layout.ToolbarLayout = Ext.extend(Ext.layout.ContainerLayout, {
19 * @property triggerWidth
21 * The width allocated for the menu trigger at the extreme right end of the Toolbar
26 * @property noItemsMenuText
28 * HTML fragment to render into the toolbar overflow menu if there are no items to display
30 noItemsMenuText : '<div class="x-toolbar-no-items">(None)</div>',
34 * @property lastOverflow
36 * Used internally to record whether the last layout caused an overflow or not
44 * String used to build the HTML injected to support the Toolbar's layout. The align property is
45 * injected into this string inside the td.x-toolbar-left element during onLayout.
48 '<table cellspacing="0" class="x-toolbar-ct">',
51 '<td class="x-toolbar-left" align="{0}">',
52 '<table cellspacing="0">',
54 '<tr class="x-toolbar-left-row"></tr>',
58 '<td class="x-toolbar-right" align="right">',
59 '<table cellspacing="0" class="x-toolbar-right-ct">',
63 '<table cellspacing="0">',
65 '<tr class="x-toolbar-right-row"></tr>',
70 '<table cellspacing="0">',
72 '<tr class="x-toolbar-extras-row"></tr>',
87 * Create the wrapping Toolbar HTML and render/move all the items into the correct places
89 onLayout : function(ct, target) {
90 //render the Toolbar <table> HTML if it's not already present
92 var align = ct.buttonAlign == 'center' ? 'center' : 'left';
94 target.addClass('x-toolbar-layout-ct');
95 target.insertHtml('beforeEnd', String.format(this.tableHTML, align));
97 this.leftTr = target.child('tr.x-toolbar-left-row', true);
98 this.rightTr = target.child('tr.x-toolbar-right-row', true);
99 this.extrasTr = target.child('tr.x-toolbar-extras-row', true);
101 if (this.hiddenItem == undefined) {
103 * @property hiddenItems
105 * Holds all items that are currently hidden due to there not being enough space to render them
106 * These items will appear on the expand menu.
108 this.hiddenItems = [];
112 var side = ct.buttonAlign == 'right' ? this.rightTr : this.leftTr,
113 items = ct.items.items,
116 //render each item if not already rendered, place it into the correct (left or right) target
117 for (var i = 0, len = items.length, c; i < len; i++, position++) {
123 } else if (!c.rendered) {
124 c.render(this.insertCell(c, side, position));
126 if (!c.xtbHidden && !this.isValidParent(c, side.childNodes[position])) {
127 var td = this.insertCell(c, side, position);
128 td.appendChild(c.getPositionEl().dom);
129 c.container = Ext.get(td);
134 //strip extra empty cells
135 this.cleanup(this.leftTr);
136 this.cleanup(this.rightTr);
137 this.cleanup(this.extrasTr);
138 this.fitToSize(target);
143 * Removes any empty nodes from the given element
144 * @param {Ext.Element} el The element to clean up
146 cleanup : function(el) {
147 var cn = el.childNodes, i, c;
149 for (i = cn.length-1; i >= 0 && (c = cn[i]); i--) {
158 * Inserts the given Toolbar item into the given element
159 * @param {Ext.Component} c The component to add
160 * @param {Ext.Element} target The target to add the component to
161 * @param {Number} position The position to add the component at
163 insertCell : function(c, target, position) {
164 var td = document.createElement('td');
165 td.className = 'x-toolbar-cell';
167 target.insertBefore(td, target.childNodes[position] || null);
174 * Hides an item because it will not fit in the available width. The item will be unhidden again
175 * if the Toolbar is resized to be large enough to show it
176 * @param {Ext.Component} item The item to hide
178 hideItem : function(item) {
179 this.hiddenItems.push(item);
181 item.xtbHidden = true;
182 item.xtbWidth = item.getPositionEl().dom.parentNode.offsetWidth;
188 * Unhides an item that was previously hidden due to there not being enough space left on the Toolbar
189 * @param {Ext.Component} item The item to show
191 unhideItem : function(item) {
193 item.xtbHidden = false;
194 this.hiddenItems.remove(item);
199 * Returns the width of the given toolbar item. If the item is currently hidden because there
200 * is not enough room to render it, its previous width is returned
201 * @param {Ext.Component} c The component to measure
202 * @return {Number} The width of the item
204 getItemWidth : function(c) {
205 return c.hidden ? (c.xtbWidth || 0) : c.getPositionEl().dom.parentNode.offsetWidth;
210 * Called at the end of onLayout. At this point the Toolbar has already been resized, so we need
211 * to fit the items into the available width. We add up the width required by all of the items in
212 * the toolbar - if we don't have enough space we hide the extra items and render the expand menu
214 * @param {Ext.Element} target The Element the Toolbar is currently laid out within
216 fitToSize : function(target) {
217 if (this.container.enableOverflow === false) {
221 var width = target.dom.clientWidth,
222 tableWidth = target.dom.firstChild.offsetWidth,
223 clipWidth = width - this.triggerWidth,
224 lastWidth = this.lastWidth || 0,
226 hiddenItems = this.hiddenItems,
227 hasHiddens = hiddenItems.length != 0,
228 isLarger = width >= lastWidth;
230 this.lastWidth = width;
232 if (tableWidth > width || (hasHiddens && isLarger)) {
233 var items = this.container.items.items,
238 for (var i = 0; i < len; i++) {
242 loopWidth += this.getItemWidth(item);
243 if (loopWidth > clipWidth) {
244 if (!(item.hidden || item.xtbHidden)) {
247 } else if (item.xtbHidden) {
248 this.unhideItem(item);
254 //test for number of hidden items again here because they may have changed above
255 hasHiddens = hiddenItems.length != 0;
260 if (!this.lastOverflow) {
261 this.container.fireEvent('overflowchange', this.container, true);
262 this.lastOverflow = true;
264 } else if (this.more) {
269 if (this.lastOverflow) {
270 this.container.fireEvent('overflowchange', this.container, false);
271 this.lastOverflow = false;
278 * Returns a menu config for a given component. This config is used to create a menu item
279 * to be added to the expander menu
280 * @param {Ext.Component} component The component to create the config for
281 * @param {Boolean} hideOnClick Passed through to the menu item
283 createMenuConfig : function(component, hideOnClick){
284 var config = Ext.apply({}, component.initialConfig),
285 group = component.toggleGroup;
287 Ext.copyTo(config, component, [
288 'iconCls', 'icon', 'itemId', 'disabled', 'handler', 'scope', 'menu'
292 text : component.overflowText || component.text,
293 hideOnClick: hideOnClick
296 if (group || component.enableToggle) {
299 checked: component.pressed,
301 checkchange: function(item, checked){
302 component.toggle(checked);
308 delete config.ownerCt;
317 * Adds the given Toolbar item to the given menu. Buttons inside a buttongroup are added individually.
318 * @param {Ext.menu.Menu} menu The menu to add to
319 * @param {Ext.Component} component The component to add
321 addComponentToMenu : function(menu, component) {
322 if (component instanceof Ext.Toolbar.Separator) {
325 } else if (Ext.isFunction(component.isXType)) {
326 if (component.isXType('splitbutton')) {
327 menu.add(this.createMenuConfig(component, true));
329 } else if (component.isXType('button')) {
330 menu.add(this.createMenuConfig(component, !component.menu));
332 } else if (component.isXType('buttongroup')) {
333 component.items.each(function(item){
334 this.addComponentToMenu(menu, item);
342 * Deletes the sub-menu of each item in the expander menu. Submenus are created for items such as
343 * splitbuttons and buttongroups, where the Toolbar item cannot be represented by a single menu item
345 clearMenu : function(){
346 var menu = this.moreMenu;
347 if (menu && menu.items) {
348 menu.items.each(function(item){
356 * Called before the expand menu is shown, this rebuilds the menu since it was last shown because
357 * it is possible that the items hidden due to space limitations on the Toolbar have changed since.
358 * @param {Ext.menu.Menu} m The menu
360 beforeMoreShow : function(menu) {
361 var items = this.container.items.items,
366 var needsSep = function(group, item){
367 return group.isXType('buttongroup') && !(item instanceof Ext.Toolbar.Separator);
372 for (var i = 0; i < len; i++) {
374 if (item.xtbHidden) {
375 if (prev && (needsSep(item, prev) || needsSep(prev, item))) {
378 this.addComponentToMenu(menu, item);
383 // put something so the menu isn't empty if no compatible items found
384 if (menu.items.length < 1) {
385 menu.add(this.noItemsMenuText);
391 * Creates the expand trigger and menu, adding them to the <tr> at the extreme right of the
394 initMore : function(){
399 * @type Ext.menu.Menu
400 * The expand menu - holds items for every Toolbar item that cannot be shown
401 * because the Toolbar is currently not wide enough.
403 this.moreMenu = new Ext.menu.Menu({
404 ownerCt : this.container,
406 beforeshow: this.beforeMoreShow,
415 * The expand button which triggers the overflow menu to be shown
417 this.more = new Ext.Button({
418 iconCls: 'x-toolbar-more-icon',
419 cls : 'x-toolbar-more',
420 menu : this.moreMenu,
421 ownerCt: this.container
424 var td = this.insertCell(this.more, this.extrasTr, 100);
425 this.more.render(td);
429 destroy : function(){
430 Ext.destroy(this.more, this.moreMenu);
433 delete this.extrasTr;
434 Ext.layout.ToolbarLayout.superclass.destroy.call(this);
438 Ext.Container.LAYOUTS.toolbar = Ext.layout.ToolbarLayout;