/** * {@link Ext.Toolbar}s are most commonly used as docked items as within a {@link Ext.Container}. They can be docked either `top` or `bottom` using the {@link #docked} configuration. * * They allow you to insert items (normally {@link Ext.Button buttons}) and also add a {@link #title}. * * The {@link #defaultType} of {@link Ext.Toolbar} is {@link Ext.Button}. * * You can alternatively use {@link Ext.TitleBar} if you want the title to automatically adjust the size of its items. * * ## Examples * * @example miniphone preview * Ext.create('Ext.Container', { * fullscreen: true, * layout: { * type: 'vbox', * pack: 'center' * }, * items: [ * { * xtype : 'toolbar', * docked: 'top', * title: 'My Toolbar' * }, * { * xtype: 'container', * defaults: { * xtype: 'button', * margin: '10 10 0 10' * }, * items: [ * { * text: 'Toggle docked', * handler: function() { * var toolbar = Ext.ComponentQuery.query('toolbar')[0], * newDocked = (toolbar.getDocked() === 'top') ? 'bottom' : 'top'; * * toolbar.setDocked(newDocked); * } * }, * { * text: 'Toggle UI', * handler: function() { * var toolbar = Ext.ComponentQuery.query('toolbar')[0], * newUi = (toolbar.getUi() === 'light') ? 'dark' : 'light'; * * toolbar.setUi(newUi); * } * }, * { * text: 'Change title', * handler: function() { * var toolbar = Ext.ComponentQuery.query('toolbar')[0], * titles = ['My Toolbar', 'Ext.Toolbar', 'Configurations are awesome!', 'Beautiful.'], //internally, the title configuration gets converted into a {@link Ext.Title} component, //so you must get the title configuration of that component * title = toolbar.getTitle().getTitle(), * newTitle = titles[titles.indexOf(title) + 1] || titles[0]; * * toolbar.setTitle(newTitle); * } * } * ] * } * ] * }); * * ## Notes * * You must use a HTML5 doctype for {@link #docked} `bottom` to work. To do this, simply add the following code to the HTML file: * * <!doctype html> * * So your index.html file should look a little like this: * * <!doctype html> * <html> * <head> * <title>MY application title</title> * ... * */Ext.define('Ext.Toolbar', { extend: 'Ext.Container', xtype : 'toolbar', requires: [ 'Ext.Button', 'Ext.Title', 'Ext.Spacer', 'Ext.layout.HBox' ], /** * @private */ isToolbar: true, config: { /** * @cfg {String/Ext.Title} title * The title of the toolbar. * @accessor */ title: null, /** * @cfg {String} defaultType * The default xtype to create. * @accessor */ defaultType: 'button', /** * @cfg {String} * A default {@link Ext.Component#ui ui} to use for {@link Ext.Button Button} items. */ defaultButtonUI: null, /** * @cfg {String} docked * The docked position for this {@link Ext.Toolbar}. * If you specify `left` or `right`, the {@link #layout} configuration will automatically change to a `vbox`. It's also * recommended to adjust the {@link #width} of the toolbar if you do this. * @accessor */ /** * @cfg {String} minHeight * The minimum height height of the Toolbar. * @accessor */ minHeight: null, /** * @cfg {Object/String} layout Configuration for this Container's layout. Example: * * Ext.create('Ext.Container', { * layout: { * type: 'hbox', * align: 'middle' * }, * items: [ * { * xtype: 'panel', * flex: 1, * style: 'background-color: red;' * }, * { * xtype: 'panel', * flex: 2, * style: 'background-color: green' * } * ] * }); * * __Note:__ If you set the {@link #docked} configuration to `left` or `right`, the default layout will change from the * `hbox` to a `vbox`. * * @accessor */ layout: { type: 'hbox', align: 'center' } }, border: false, classCls: Ext.baseCSSPrefix + 'toolbar', hasCSSMinHeight: true, constructor: function(config) { config = config || {}; if (config.docked == "left" || config.docked == "right") { config.layout = { type: 'vbox', align: 'stretch' }; } this.callParent([config]); }, /** * @private */ applyTitle: function(title) { if (typeof title == 'string') { title = { title: title, centered : true }; } return Ext.factory(title, Ext.Title, this.getTitle()); }, /** * @private */ updateTitle: function(newTitle, oldTitle) { if (newTitle) { this.add(newTitle); } if (oldTitle) { oldTitle.destroy(); } }, /** * Shows the title, if it exists. */ showTitle: function() { var title = this.getTitle(); if (title) { title.show(); } }, /** * Hides the title, if it exists. */ hideTitle: function() { var title = this.getTitle(); if (title) { title.hide(); } }, /** * Returns an {@link Ext.Title} component. * @member Ext.Toolbar * @method getTitle * @return {Ext.Title} */ /** * Use this to update the {@link #title} configuration. * @member Ext.Toolbar * @method setTitle * @param {String/Ext.Title} title You can either pass a String, or a config/instance of {@link Ext.Title}. */ onItemAdd: function(item, index) { var defaultButtonUI = this.getDefaultButtonUI(); if (defaultButtonUI) { if (item.isSegmentedButton) { if (item.getDefaultUI() == null) { item.setDefaultUI(defaultButtonUI); } } else if (item.isButton && (item.getUi() == null)) { item.setUi(defaultButtonUI); } } this.callParent([item, index]); }, factoryItem: function (config) { if (config === '->') { config = { xtype: 'component', flex: 1 }; } return this.callParent([ config ]); }});