ExtJS LUX components design can be found at:
https://app.zeplin.io/project/5970b366bee38cf87b2de932
ExtJS LUX live components can be found at:
🧐 Specifications
Component | CSS Class | Class added with component | Screenshot | Usage Example |
|---|---|---|---|---|
Text field |  | {
xtype: 'textfield'
}
| ||
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) | YES |  | {
xtype: 'combo',
store: ['item1', 'item2', 'item3'],
}
|
Dropdown/Menu | (as-combomenu) | YES |  | {
xtype: 'combo',
showSplitter: false,
editable: false,
store: ['item1', 'item2', 'item3'],
}
|
Icon buttons | as-icon-btn |  | ||
Toggle button | as-togglebutton |  | ||
Date field | (as-date-field) | YES |  | {
xtype: 'datefield'
}
|
Time field | (as-time-field) | YES |  | {
xtype: 'timefield'
}
|
Number field | (as-number-field) | YES |  | {
xtype: 'numberfield'
}
|
Split button | (as-split-btn) | YES |  | {
xtype: 'splitbutton',
text: 'Click',
menu: {
items: [{
text: 'item1'
}, {
text: 'item2'
}]
}
}
|
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 | YES |   | {
xtype: 'label',
id: 'tooltipCmp',
text: 'Hover to show tooltip',
listeners: {
'afterrender': function () {
Ext.create('Ext.tip.ToolTip', {
target: 'tooltipCmp',
title: 'Tooltip Header',
html: 'Aliquam sollicitudin, tincidunt mi volutpat semper'
});
}
}
}
| |
Error tooltip | (as-tooltip-error) | YES |  | {
xtype: 'label',
id: 'tooltipCmp',
text: 'Hover to show tooltip',
listeners: {
'afterrender': function () {
Ext.create('Ext.tip.ToolTip', {
target: 'tooltipCmp',
toolTipType: 'error',
title: 'Tooltip Header',
html: 'Aliquam sollicitudin, tincidunt mi volutpat semper'
});
}
}
}
|
arning tooltip | (as-tooltip-warning) | YES |  | {
xtype: 'label',
id: 'tooltipCmp',
text: 'Hover to show tooltip',
listeners: {
'afterrender': function () {
Ext.create('Ext.tip.ToolTip', {
target: 'tooltipCmp',
toolTipType: 'warning',
title: 'Tooltip Header',
html: 'Aliquam sollicitudin, tincidunt mi volutpat semper'
});
}
}
}
|
Info tooltip | (as-tooltip-info) | YES |  | {
xtype: 'label',
id: 'tooltipCmp',
text: 'Hover to show tooltip',
listeners: {
'afterrender': function () {
Ext.create('Ext.tip.ToolTip', {
target: 'tooltipCmp',
toolTipType: 'info',
title: 'Tooltip Header',
html: 'Aliquam sollicitudin, tincidunt mi volutpat semper'
});
}
}
}
|
Help tooltip | (as-tooltip-help) | YES |  | {
xtype: 'label',
id: 'tooltipCmp',
text: 'Hover to show tooltip',
listeners: {
'afterrender': function () {
Ext.create('Ext.tip.ToolTip', {
target: 'tooltipCmp',
toolTipType: 'help',
title: 'Tooltip Header',
html: 'Aliquam sollicitudin, tincidunt mi volutpat semper'
});
}
}
}
|
📐 Additional guidance
Content | |
|---|---|
Accessibility | |
Mobile | |
Best practices | |
Related |