Properties Methods Events Config Options Direct Link
Observable
  Component
    BoxComponent
      Container
        Toolbar

Class CQ.Ext.Toolbar

Package:CQ.Ext
Class:Toolbar
Subclasses:PagingToolbar, Switcher, UserInfo, WrappingToolbar
Extends:CQ.Ext.Container
Clientlib:cq.widgets
xtype: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'       CQ.Ext.Toolbar.Fill       begin using the right-justified button container
'-'       'tbseparator'  CQ.Ext.Toolbar.Separator  add a vertical separator bar between toolbar items
' '       'tbspacer'     CQ.Ext.Toolbar.Spacer     add horiztonal space between elements
Example usage of various elements:
var tb = new CQ.Ext.Toolbar({
    renderTo: document.body,
    width: 600,
    height: 100,
    items: [
        {
            // xtype: 'button', // default for Toolbars, same as 'tbbutton'
            text: 'Button'
        },
        {
            xtype: 'splitbutton', // same as 'tbsplitbutton'
            text: 'Split Button'
        },
        // begin using the right-justified button container
        '->', // same as {xtype: 'tbfill'}, // CQ.Ext.Toolbar.Fill
        {
            xtype: 'textfield',
            name: 'field1',
            emptyText: 'enter search term'
        },
        // add a vertical separator bar between toolbar items
        '-', // same as {xtype: 'tbseparator'} to create CQ.Ext.Toolbar.Separator
        'text 1', // same as {xtype: 'tbtext', text: 'text1'} to create CQ.Ext.Toolbar.TextItem
        {xtype: 'tbspacer'},// same as ' ' to create CQ.Ext.Toolbar.Spacer
        'text 2',
        {xtype: 'tbspacer', width: 50}, // add a 50px space
        'text 3'
    ]
});
Example adding a ComboBox within a menu of a button:
// ComboBox creation
var combo = new CQ.Ext.form.ComboBox({
    store: new CQ.Ext.data.ArrayStore({
        autoDestroy: true,
        fields: ['initials', 'fullname'],
        data : [
            ['FF', 'Fred Flintstone'],
            ['BR', 'Barney Rubble']
        ]
    }),
    displayField: 'fullname',
    typeAhead: true,
    mode: 'local',
    forceSelection: true,
    triggerAction: 'all',
    emptyText: 'Select a name...',
    selectOnFocus: true,
    width: 135,
    getListParent: function() {
        return this.el.up('.x-menu');
    },
    iconCls: 'no-icon' //use iconCls if placing within menu to shift to right side of menu
});

// put ComboBox in a Menu
var menu = new CQ.Ext.menu.Menu({
    id: 'mainMenu',
    items: [
        combo // A Field in a Menu
    ]
});

// add a Button with the menu
tb.add({
        text:'Button w/ Menu',
        menu: menu  // assign menu by instance
    });
tb.doLayout();

Config Options

Config Options Defined By
  allowDomMove : Boolean
Whether the component can move the Dom node when rendering (defaults to true).
Component
  disabled : Boolean
Render this component disabled (default is false).
Component
  disabledClass : String
CSS class added to the component when it is disabled (defaults to 'x-item-disabled').
Component
  pageX : Number
The page level x coordinate for this component if contained within a positioning container.
BoxComponent
  pageY : Number
The page level y coordinate for this component if contained within a positioning container.
BoxComponent
  x : Number
The local x (left) coordinate for this component if contained within a positioning container.
BoxComponent
  y : Number
The local y (top) coordinate for this component if contained within a positioning container.
BoxComponent

Public Properties

Property Defined By
  disabled : Boolean
True if this component is disabled. Read-only.
Component
  hidden : Boolean
True if this component is hidden. Read-only.
Component
  initialConfig : Object
This Component's initial configuration specification. Read-only.
Component
  items : MixedCollection
The collection of components in this container as a CQ.Ext.util.MixedCollection
Container
  refOwner : CQ.Ext.Container The
Component
  rendered : Boolean
True if this component has been rendered. Read-only.
Component

Public Methods

Method Defined By

Public Events

Event Defined By