+Copyright (c) 2011 Sencha Inc
+
+Contact: http://www.sencha.com/contact
+
+GNU General Public License Usage
+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.
+
+If you are unsure which license is appropriate for your use, please contact the sales department at http://www.sencha.com/contact.
+
+*/
+/**
+ * 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();
+ * }
+ * }
+ * ]
+ * });
+ *