3 This file is part of Ext JS 4
5 Copyright (c) 2011 Sencha Inc
7 Contact: http://www.sencha.com/contact
9 GNU General Public License Usage
10 This file may be used under the terms of the GNU General Public License version 3.0 as published by the Free Software Foundation and appearing in the file LICENSE included in the packaging of this file. Please review the following information to ensure the GNU General Public License version 3.0 requirements will be met: http://www.gnu.org/copyleft/gpl.html.
12 If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
16 * Basic Toolbar class. Although the {@link Ext.container.Container#defaultType defaultType} for Toolbar is {@link Ext.button.Button button}, Toolbar
17 * elements (child items for the Toolbar container) may be virtually any type of Component. Toolbar elements can be created explicitly via their
18 * constructors, or implicitly via their xtypes, and can be {@link #add}ed dynamically.
20 * ## Some items have shortcut strings for creation:
22 * | Shortcut | xtype | Class | Description
23 * |:---------|:--------------|:------------------------------|:---------------------------------------------------
24 * | `->` | `tbfill` | {@link Ext.toolbar.Fill} | begin using the right-justified button container
25 * | `-` | `tbseparator` | {@link Ext.toolbar.Separator} | add a vertical separator bar between toolbar items
26 * | ` ` | `tbspacer` | {@link Ext.toolbar.Spacer} | add horiztonal space between elements
29 * Ext.create('Ext.toolbar.Toolbar', {
30 * renderTo: document.body,
34 * // xtype: 'button', // default for Toolbars
38 * xtype: 'splitbutton',
39 * text : 'Split Button'
41 * // begin using the right-justified button container
42 * '->', // same as { xtype: 'tbfill' }
44 * xtype : 'textfield',
46 * emptyText: 'enter search term'
48 * // add a vertical separator bar between toolbar items
49 * '-', // same as {xtype: 'tbseparator'} to create Ext.toolbar.Separator
50 * 'text 1', // same as {xtype: 'tbtext', text: 'text1'} to create Ext.toolbar.TextItem
51 * { xtype: 'tbspacer' },// same as ' ' to create Ext.toolbar.Spacer
53 * { xtype: 'tbspacer', width: 50 }, // add a 50px space
58 * Toolbars have {@link #enable} and {@link #disable} methods which when called, will enable/disable all items within your toolbar.
61 * Ext.create('Ext.toolbar.Toolbar', {
62 * renderTo: document.body,
69 * xtype: 'splitbutton',
70 * text : 'Split Button'
74 * xtype : 'textfield',
76 * emptyText: 'enter search term'
84 * var enableBtn = Ext.create('Ext.button.Button', {
85 * text : 'Enable All Items',
88 * handler : function() {
89 * //disable the enable button and enable the disable button
90 * enableBtn.disable();
91 * disableBtn.enable();
93 * //enable the toolbar
98 * var disableBtn = Ext.create('Ext.button.Button', {
99 * text : 'Disable All Items',
101 * handler : function() {
102 * //enable the enable button and disable button
103 * disableBtn.disable();
104 * enableBtn.enable();
106 * //disable the toolbar
111 * var toolbar = Ext.create('Ext.toolbar.Toolbar', {
112 * renderTo: document.body,
114 * margin : '5 0 0 0',
115 * items : [enableBtn, disableBtn]
118 * Adding items to and removing items from a toolbar is as simple as calling the {@link #add} and {@link #remove} methods. There is also a {@link #removeAll} method
119 * which remove all items within the toolbar.
122 * var toolbar = Ext.create('Ext.toolbar.Toolbar', {
123 * renderTo: document.body,
127 * text: 'Example Button'
132 * var addedItems = [];
134 * Ext.create('Ext.toolbar.Toolbar', {
135 * renderTo: document.body,
137 * margin : '5 0 0 0',
140 * text : 'Add a button',
142 * handler: function() {
143 * var text = prompt('Please enter the text for your button:');
144 * addedItems.push(toolbar.add({
150 * text : 'Add a text item',
152 * handler: function() {
153 * var text = prompt('Please enter the text for your item:');
154 * addedItems.push(toolbar.add(text));
158 * text : 'Add a toolbar seperator',
160 * handler: function() {
161 * addedItems.push(toolbar.add('-'));
165 * text : 'Add a toolbar spacer',
167 * handler: function() {
168 * addedItems.push(toolbar.add('->'));
173 * text : 'Remove last inserted item',
175 * handler: function() {
176 * if (addedItems.length) {
177 * toolbar.remove(addedItems.pop());
178 * } else if (toolbar.items.length) {
179 * toolbar.remove(toolbar.items.last());
181 * alert('No items in the toolbar');
186 * text : 'Remove all items',
188 * handler: function() {
189 * toolbar.removeAll();
196 * Creates a new Toolbar
197 * @param {Object/Object[]} config A config object or an array of buttons to <code>{@link #add}</code>
198 * @docauthor Robert Dougan <rob@sencha.com>
200 Ext.define('Ext.toolbar.Toolbar', {
201 extend: 'Ext.container.Container',
204 'Ext.layout.container.HBox',
205 'Ext.layout.container.VBox',
209 'Ext.toolbar.Separator'
211 alias: 'widget.toolbar',
212 alternateClassName: 'Ext.Toolbar',
215 baseCls : Ext.baseCSSPrefix + 'toolbar',
216 ariaRole : 'toolbar',
218 defaultType: 'button',
221 * @cfg {Boolean} vertical
222 * Set to `true` to make the toolbar vertical. The layout will become a `vbox`.
227 * @cfg {String/Object} layout
228 * This class assigns a default layout (`layout: 'hbox'`).
229 * Developers _may_ override this configuration option if another layout
230 * is required (the constructor must be passed a configuration object in this
231 * case instead of an array).
232 * See {@link Ext.container.Container#layout} for additional information.
236 * @cfg {Boolean} enableOverflow
237 * Configure true to make the toolbar provide a button which activates a dropdown Menu to show
238 * items which overflow the Toolbar's width.
240 enableOverflow: false,
243 * @cfg {String} menuTriggerCls
244 * Configure the icon class of the overflow button.
246 menuTriggerCls: Ext.baseCSSPrefix + 'toolbar-more-icon',
251 itemCls: Ext.baseCSSPrefix + 'toolbar-item',
253 initComponent: function() {
257 // check for simplified (old-style) overflow config:
258 if (!me.layout && me.enableOverflow) {
259 me.layout = { overflowHandler: 'Menu' };
262 if (me.dock === 'right' || me.dock === 'left') {
266 me.layout = Ext.applyIf(Ext.isString(me.layout) ? {
268 } : me.layout || {}, {
269 type: me.vertical ? 'vbox' : 'hbox',
270 align: me.vertical ? 'stretchmax' : 'middle',
271 clearInnerCtOnLayout: true
275 me.addClsWithUI('vertical');
278 // @TODO: remove this hack and implement a more general solution
279 if (me.ui === 'footer') {
280 me.ignoreBorderManagement = true;
286 * @event overflowchange
287 * Fires after the overflow state has changed.
288 * @param {Object} c The Container
289 * @param {Boolean} lastOverflow overflow state
291 me.addEvents('overflowchange');
293 // Subscribe to Ext.FocusManager for key navigation
294 keys = me.vertical ? ['up', 'down'] : ['left', 'right'];
295 Ext.FocusManager.subscribe(me, {
300 getRefItems: function(deep) {
302 items = me.callParent(arguments),
306 if (deep && me.enableOverflow) {
307 handler = layout.overflowHandler;
308 if (handler && handler.menu) {
309 items = items.concat(handler.menu.getRefItems(deep));
316 * Adds element(s) to the toolbar -- this function takes a variable number of
317 * arguments of mixed type and adds them to the toolbar.
319 * **Note**: See the notes within {@link Ext.container.Container#add}.
321 * @param {Object...} args The following types of arguments are all valid:
322 * - `{@link Ext.button.Button config}`: A valid button config object
323 * - `HtmlElement`: Any standard HTML element
324 * - `Field`: Any form field
325 * - `Item`: Any subclass of {@link Ext.toolbar.Item}
326 * - `String`: Any generic string (gets wrapped in a {@link Ext.toolbar.TextItem}).
327 * Note that there are a few special strings that are treated differently as explained next.
328 * - `'-'`: Creates a separator element
329 * - `' '`: Creates a spacer element
330 * - `'->'`: Creates a fill element
336 lookupComponent: function(c) {
337 if (Ext.isString(c)) {
338 var shortcut = Ext.toolbar.Toolbar.shortcuts[c];
349 this.applyDefaults(c);
351 return this.callParent(arguments);
355 applyDefaults: function(c) {
356 if (!Ext.isString(c)) {
357 c = this.callParent(arguments);
358 var d = this.internalDefaults;
360 Ext.applyIf(c.initialConfig, d);
370 trackMenu: function(item, remove) {
371 if (this.trackMenus && item.menu) {
372 var method = remove ? 'mun' : 'mon',
375 me[method](item, 'mouseover', me.onButtonOver, me);
376 me[method](item, 'menushow', me.onButtonMenuShow, me);
377 me[method](item, 'menuhide', me.onButtonMenuHide, me);
382 constructButton: function(item) {
383 return item.events ? item : this.createComponent(item, item.split ? 'splitbutton' : this.defaultType);
387 onBeforeAdd: function(component) {
388 if (component.is('field') || (component.is('button') && this.ui != 'footer')) {
389 component.ui = component.ui + '-toolbar';
392 // Any separators needs to know if is vertical or not
393 if (component instanceof Ext.toolbar.Separator) {
394 component.setUI((this.vertical) ? 'vertical' : 'horizontal');
397 this.callParent(arguments);
401 onAdd: function(component) {
402 this.callParent(arguments);
404 this.trackMenu(component);
411 onRemove: function(c) {
412 this.callParent(arguments);
413 this.trackMenu(c, true);
417 onButtonOver: function(btn){
418 if (this.activeMenuBtn && this.activeMenuBtn != btn) {
419 this.activeMenuBtn.hideMenu();
421 this.activeMenuBtn = btn;
426 onButtonMenuShow: function(btn) {
427 this.activeMenuBtn = btn;
431 onButtonMenuHide: function(btn) {
432 delete this.activeMenuBtn;