Clear Up
SharpKit Reference

Toolbar Class

Basic Toolbar class. Although the defaultType for Toolbar is 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 added dynamically.

Some items have shortcut strings for creation:

Shortcut xtype Class Description
-> tbfill Ext.toolbar.Fill begin using the right-justified button container
- tbseparator Ext.toolbar.Separator add a vertical separator bar between toolbar items
tbspacer Ext.toolbar.Spacer add horiztonal space between elements
  
    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 enable and disable methods which when called, will enable/disable all items within your toolbar.

  
    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

  
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 add and remove methods. There is also a removeAll method which remove all items within the toolbar.

  
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 separator',
            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();
            }
            }
            ]
            });
            

Namespace: Ext.toolbar

Constructors

Fields

Name Description
enableOverflow Configure true to make the toolbar provide a button which activates a dropdown Menu to show items which overflow the Toolbar's width. Defaults to: false
menuTriggerCls Configure the icon class of the overflow button. Defaults to: "x-toolbar-more-icon"
vertical Set to true to make the toolbar vertical. The layout will become a vbox. Defaults to: false

Properties

Name Description
isToolbar true in this class to identify an object as an instantiated Toolbar, or subclass thereof. Defaults to: true
© Copyright 2005-2011 SharpKit. All rights reserved.