Clear Up
SharpKit Reference

Ext.toolbar Namespace

Download SDK: SharpKit.ExtJs.zip

Classes

Name Description
Fill

A non-rendering placeholder item which instructs the Toolbar's Layout to begin using the right-justified button container.

  
    Ext.create('Ext.panel.Panel', {
            title: 'Toolbar Fill Example',
            width: 300,
            height: 200,
            tbar : [
            'Item 1',
            { xtype: 'tbfill' },
            'Item 2'
            ],
            renderTo: Ext.getBody()
            });
            
FillConfig
FillEvents
Item

The base class that other non-interacting Toolbar Item classes should extend in order to get some basic common toolbar item functionality.

ItemConfig
ItemEvents
Paging

As the number of records increases, the time required for the browser to render them increases. Paging is used to reduce the amount of data exchanged with the client. Note: if there are more records/rows than can be viewed in the available screen area, vertical scrollbars will be added.

Paging is typically handled on the server side (see exception below). The client sends parameters to the server side, which the server needs to interpret and then respond with the appropriate data.

Ext.toolbar.Paging is a specialized toolbar that is bound to a Ext.data.Store and provides automatic paging control. This Component loads blocks of data into the store by passing parameters used for paging criteria.

Paging Toolbar is typically used as one of the Grid's toolbars:

  
var itemsPerPage = 2;   // set the number of items you want per page
            var store = Ext.create('Ext.data.Store', {
            id:'simpsonsStore',
            autoLoad: false,
            fields:['name', 'email', 'phone'],
            pageSize: itemsPerPage, // items per page
            proxy: {
            type: 'ajax',
            url: 'pagingstore.js',  // url that will load data with respect to start and limit params
            reader: {
            type: 'json',
            root: 'items',
            totalProperty: 'total'
            }
            }
            });
            // specify segment of data you want to load using params
            store.load({
            params:{
            start:0,
            limit: itemsPerPage
            }
            });
            Ext.create('Ext.grid.Panel', {
            title: 'Simpsons',
            store: store,
            columns: [
            { header: 'Name',  dataIndex: 'name' },
            { header: 'Email', dataIndex: 'email', flex: 1 },
            { header: 'Phone', dataIndex: 'phone' }
            ],
            width: 400,
            height: 125,
            dockedItems: [{
            xtype: 'pagingtoolbar',
            store: store,   // same store GridPanel is using
            dock: 'bottom',
            displayInfo: true
            }],
            renderTo: Ext.getBody()
            });
            

To use paging, you need to set a pageSize configuration on the Store, and pass the paging requirements to the server when the store is first loaded.

  
store.load({
            params: {
            // specify params for the first page load if using paging
            start: 0,
            limit: myPageSize,
            // other params
            foo:   'bar'
            }
            });
            

If using store's autoLoad configuration:

  
var myStore = Ext.create('Ext.data.Store', {
            autoLoad: {start: 0, limit: 25},
            ...
            });
            

The packet sent back from the server would have this form:

  
{
            "success": true,
            "results": 2000,
            "rows": [ // ***Note:** this must be an Array
            { "id":  1, "name": "Bill", "occupation": "Gardener" },
            { "id":  2, "name":  "Ben", "occupation": "Horticulturalist" },
            ...
            { "id": 25, "name":  "Sue", "occupation": "Botanist" }
            ]
            }
            

Paging with Local Data

Paging can also be accomplished with local data using extensions:

  • Ext.ux.data.PagingStore
  • Paging Memory Proxy (examples/ux/PagingMemoryProxy.js)
PagingConfig
PagingEvents
Separator

A simple class that adds a vertical separator bar between toolbar items (css class: 'x-toolbar-separator').

  
    Ext.create('Ext.panel.Panel', {
            title: 'Toolbar Separator Example',
            width: 300,
            height: 200,
            tbar : [
            'Item 1',
            { xtype: 'tbseparator' },
            'Item 2'
            ],
            renderTo: Ext.getBody()
            });
            
SeparatorConfig
SeparatorEvents
Spacer

A simple element that adds extra horizontal space between items in a toolbar. By default a 2px wide space is added via CSS specification:

  
.x-toolbar .x-toolbar-spacer {
            width: 2px;
            }
            

Example:

  
    Ext.create('Ext.panel.Panel', {
            title: 'Toolbar Spacer Example',
            width: 300,
            height: 200,
            tbar : [
            'Item 1',
            { xtype: 'tbspacer' }, // or ' '
            'Item 2',
            // space width is also configurable via javascript
            { xtype: 'tbspacer', width: 50 }, // add a 50px space
            'Item 3'
            ],
            renderTo: Ext.getBody()
            });
            
SpacerConfig
SpacerEvents
TextItem

A simple class that renders text directly into a toolbar.

  
    Ext.create('Ext.panel.Panel', {
            title: 'Panel with TextItem',
            width: 300,
            height: 200,
            tbar: [
            { xtype: 'tbtext', text: 'Sample Text Item' }
            ],
            renderTo: Ext.getBody()
            });
            
TextItemConfig
TextItemEvents
Toolbar

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();
            }
            }
            ]
            });
            
ToolbarConfig
ToolbarEvents
© Copyright 2005-2011 SharpKit. All rights reserved.