Versions Compared

Version Old Version 15 New Version 16
Changes made by

dana lees kunik

dana lees kunik

Saved on

Key

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

...

http://10.156.44.66/wfo/ui-debug/index.html?modules=AppShellTest,Foundation,FoundationTest&#wsm[ws]=extJSKitchenSinkLux

🧐 Specifications

Component

Class to use

CSS Class

Class added with component

Screenshot

Usage Example

Text field

Image Modified

Code Block
{
    xtype: 'textfield'
}

Search field

as-searchfield

Image Modified
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

Status
colourGreen
titleYES

Image Modified

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

Dropdown/Menu

(as-combomenu)

added automatically

Status
colourGreen
titleYES

Image Modified

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

Icon buttons

as-icon-btn

Image Modified

Toggle button

as-togglebutton

Image Modified

Date field

(as-date-field)

added automatically

Status
colourGreen
titleYES

Image Modified

Code Block
{
  xtype: 'datefield'
}

Time field

(as-time-field)

added automatically

Status
colourGreen
titleYES

Image Modified

Code Block
{
  xtype: 'timefield'
}

Number field

(as-number-field)

Status
colourGreen
titleYES

Image Modified

Code Block
{
  xtype: 'numberfield'
}

Split button

(as-split-btn)

Status
colourGreen
titleYES

Image Modified

Code Block
{
  xtype: 'splitbutton',
  text: 'Click',
  menu: {
    items: [{
      text: 'item1'
      }, {
      text: 'item2'
     }]
   }
}

Primary button

as-btn-primary

Image Modified

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

Info message box

as-msgbox and as-msgbox-info

Image Modified

Help message box

as-msgbox and as-msgbox-help

Error message box

as-msgbox and as-msgbox-error

Image Modified

Warning message box

as-msgbox and as-msgbox-warning

Image Modified

Default message box

as-msgbox

Image Modified

Tooltips

Image Modified

Image Modified

Error tooltip

as-tooltip-error

Image Modified

Warning tooltip

as-tooltip-warning

Image Modified

Info tooltip

as-tooltip-info

Image Modified

Help tooltip

as-tooltip-help

Image Modified

📐 Additional guidance

Content

Accessibility

Mobile

Best practices

Related