Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

Component

Class to use

Screenshot

Usage Example

Text field

Code Block
{
    xtype: 'textfield'
}

Search field

as-searchfield

Code Block
{ 
xtype: 'textfield',
emptyText: 'Find',
cls: 'as-searchfield',
triggers: {
	searchTrigger: {
        	cls: Ext.baseCSSPrefix + 'form-search-trigger',
                handler: function () {
                	alert('Search activated');
                }
        }
}

Combo box

(as-combo)

added automatically

Code Block
 {
      xtype: 'combo',
      store: ['item1', 'item2', 'item3'],
  }

Dropdown/Menu

(as-combomenu)

added automatically

Code Block
{
  xtype: 'combo',
  showSplitter: false,
  editable: false,
  store: ['item1', 'item2', 'item3'],
}

Icon buttons

as-icon-btn

Toggle button

as-togglebutton

Date field

(as-date-field)

added automatically

Code Block
{
  xtype: 'datefield'
}

Time field

(as-time-field)

added automatically

Code Block
{
  xtype: 'timefield'
}

Number field

as-number-field

Split button

as-split-btn

Primary button

as-btn-primary

Code Block
{
  xtype: 'button',
  text : 'Submit',
  cls: 'as-btn-primary'
}

Info message box

as-msgbox and as-msgbox-info

Help message box

as-msgbox and as-msgbox-help

Error message box

as-msgbox and as-msgbox-error

Warning message box

as-msgbox and as-msgbox-warning

Default message box

as-msgbox

Tooltips

Error tooltip

as-tooltip-error

Warning tooltip

as-tooltip-warning

Info tooltip

as-tooltip-info

Help tooltip

as-tooltip-help

...