ExtJS LUX components design can be found at:

https://app.zeplin.io/project/5970b366bee38cf87b2de932

ExtJS LUX live components can be found at:

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

(blue star) Specifications

Component

Class to use

Screenshot

Usage Example

Search field

as-searchfield

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

Combo box

as-combo

Dropdown/Menu

as-combomenu

Icon buttons

as-icon-btn

Toggle button

as-togglebutton

Date field

as-date-field

Time field

as-time-field

Number field

as-number-field

Split button

as-split-btn

Primary button

as-btn-primary

{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

(blue star) Additional guidance

Content

  • Provide component-specific guidance on content, such as punctuation rules, standard labels, etc.

Accessibility

  • Provide component-specific best practices for accessibility.

Mobile

  • Provide guidance on how to apply this component in mobile environments.

Best practices

  • If there are industry standards for this component, list them in this section. Include "do" and "don't" examples to illustrate each point.

Related

  • List related components or patterns. Include links whenever possible.