-<body onload="prettyPrint();">
- <pre class="prettyprint lang-js">/*!
- * Ext JS Library 3.3.0
- * Copyright(c) 2006-2010 Ext JS, Inc.
- * licensing@extjs.com
- * http://www.extjs.com/license
- */
-<div id="cls-Ext.Toolbar"></div>/**
- * @class Ext.Toolbar
- * @extends Ext.Container
- * <p>Basic Toolbar class. Although the <tt>{@link Ext.Container#defaultType defaultType}</tt> for Toolbar
- * is <tt>{@link Ext.Button button}</tt>, Toolbar elements (child items for the Toolbar container) may
- * be virtually any type of Component. Toolbar elements can be created explicitly via their constructors,
- * or implicitly via their xtypes, and can be <tt>{@link #add}</tt>ed dynamically.</p>
- * <p>Some items have shortcut strings for creation:</p>
- * <pre>
-<u>Shortcut</u> <u>xtype</u> <u>Class</u> <u>Description</u>
-'->' 'tbfill' {@link Ext.Toolbar.Fill} begin using the right-justified button container
-'-' 'tbseparator' {@link Ext.Toolbar.Separator} add a vertical separator bar between toolbar items
-' ' 'tbspacer' {@link Ext.Toolbar.Spacer} add horiztonal space between elements
- * </pre>
+<body onload="prettyPrint(); highlight();">
+ <pre class="prettyprint lang-js"><span id='Ext-toolbar-Toolbar-method-constructor'><span id='Ext-toolbar-Toolbar'>/**
+</span></span> * Basic Toolbar class. Although the {@link Ext.container.Container#defaultType defaultType} for Toolbar is {@link Ext.button.Button button}, Toolbar
+ * elements (child items for the Toolbar container) may be virtually any type of Component. Toolbar elements can be created explicitly via their
+ * constructors, or implicitly via their xtypes, and can be {@link #add}ed dynamically.
+ *
+ * ## Some items have shortcut strings for creation:
+ *
+ * | Shortcut | xtype | Class | Description
+ * |:---------|:--------------|:------------------------------|:---------------------------------------------------
+ * | `->` | `tbfill` | {@link Ext.toolbar.Fill} | begin using the right-justified button container
+ * | `-` | `tbseparator` | {@link Ext.toolbar.Separator} | add a vertical separator bar between toolbar items
+ * | ` ` | `tbspacer` | {@link Ext.toolbar.Spacer} | add horiztonal space between elements
+ *
+ * @example
+ * Ext.create('Ext.toolbar.Toolbar', {
+ * renderTo: document.body,
+ * width : 500,
+ * items: [
+ * {
+ * // xtype: 'button', // default for Toolbars
+ * text: 'Button'
+ * },
+ * {
+ * xtype: 'splitbutton',
+ * text : 'Split Button'
+ * },
+ * // begin using the right-justified button container
+ * '->', // same as { xtype: 'tbfill' }
+ * {
+ * xtype : 'textfield',
+ * name : 'field1',
+ * emptyText: 'enter search term'
+ * },
+ * // add a vertical separator bar between toolbar items
+ * '-', // same as {xtype: 'tbseparator'} to create Ext.toolbar.Separator
+ * 'text 1', // same as {xtype: 'tbtext', text: 'text1'} to create Ext.toolbar.TextItem
+ * { xtype: 'tbspacer' },// same as ' ' to create Ext.toolbar.Spacer
+ * 'text 2',
+ * { xtype: 'tbspacer', width: 50 }, // add a 50px space
+ * 'text 3'
+ * ]
+ * });
+ *
+ * Toolbars have {@link #enable} and {@link #disable} methods which when called, will enable/disable all items within your toolbar.
+ *
+ * @example
+ * Ext.create('Ext.toolbar.Toolbar', {
+ * renderTo: document.body,
+ * width : 400,
+ * items: [
+ * {
+ * text: 'Button'
+ * },
+ * {
+ * xtype: 'splitbutton',
+ * text : 'Split Button'
+ * },
+ * '->',
+ * {
+ * xtype : 'textfield',
+ * name : 'field1',
+ * emptyText: 'enter search term'
+ * }
+ * ]
+ * });
+ *
+ * Example
+ *
+ * @example
+ * var enableBtn = Ext.create('Ext.button.Button', {
+ * text : 'Enable All Items',
+ * disabled: true,
+ * scope : this,
+ * handler : function() {
+ * //disable the enable button and enable the disable button
+ * enableBtn.disable();
+ * disableBtn.enable();
+ *
+ * //enable the toolbar
+ * toolbar.enable();
+ * }
+ * });
+ *
+ * var disableBtn = Ext.create('Ext.button.Button', {
+ * text : 'Disable All Items',
+ * scope : this,
+ * handler : function() {
+ * //enable the enable button and disable button
+ * disableBtn.disable();
+ * enableBtn.enable();
+ *
+ * //disable the toolbar
+ * toolbar.disable();
+ * }
+ * });
+ *
+ * var toolbar = Ext.create('Ext.toolbar.Toolbar', {
+ * renderTo: document.body,
+ * width : 400,
+ * margin : '5 0 0 0',
+ * items : [enableBtn, disableBtn]
+ * });
+ *
+ * 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
+ * which remove all items within the toolbar.
+ *
+ * @example
+ * var toolbar = Ext.create('Ext.toolbar.Toolbar', {
+ * renderTo: document.body,
+ * width : 700,
+ * items: [
+ * {
+ * text: 'Example Button'
+ * }
+ * ]
+ * });
+ *
+ * var addedItems = [];
+ *
+ * Ext.create('Ext.toolbar.Toolbar', {
+ * renderTo: document.body,
+ * width : 700,
+ * margin : '5 0 0 0',
+ * items : [
+ * {
+ * text : 'Add a button',
+ * scope : this,
+ * handler: function() {
+ * var text = prompt('Please enter the text for your button:');
+ * addedItems.push(toolbar.add({
+ * text: text
+ * }));
+ * }
+ * },
+ * {
+ * text : 'Add a text item',
+ * scope : this,
+ * handler: function() {
+ * var text = prompt('Please enter the text for your item:');
+ * addedItems.push(toolbar.add(text));
+ * }
+ * },
+ * {
+ * text : 'Add a toolbar seperator',
+ * scope : this,
+ * handler: function() {
+ * addedItems.push(toolbar.add('-'));
+ * }
+ * },
+ * {
+ * text : 'Add a toolbar spacer',
+ * scope : this,
+ * handler: function() {
+ * addedItems.push(toolbar.add('->'));
+ * }
+ * },
+ * '->',
+ * {
+ * text : 'Remove last inserted item',
+ * scope : this,
+ * handler: function() {
+ * if (addedItems.length) {
+ * toolbar.remove(addedItems.pop());
+ * } else if (toolbar.items.length) {
+ * toolbar.remove(toolbar.items.last());
+ * } else {
+ * alert('No items in the toolbar');
+ * }
+ * }
+ * },
+ * {
+ * text : 'Remove all items',
+ * scope : this,
+ * handler: function() {
+ * toolbar.removeAll();
+ * }
+ * }
+ * ]
+ * });