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 |  | {
xtype:'button',
glyph: 'xe827@lux-theme-icon'
}
| |
Toggle button | as-togglebutton |  | {
xtype: 'button',
glyph: 'xe8bf@lux-theme-icon',
text: 'Toggle Button',
scale: 'medium',
enableToggle: true,
componentCls: '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) | YES |  | xtype: 'button',
text: 'click!',
listeners: {
click: function () {
var myMsg = Ext.Msg.showInfo({
message: 'Morbi in faucibus lorem. Aliquam sollicitudin, mi tincidunt volutpat semper, neque nibh pulvinar sapien',
fn : Ext.emptyFn
});
}
}
|
Help message box | (as-msgbox and as-msgbox-help) | YES | xtype: 'button',
text: 'click!',
listeners: {
click: function () {
var myMsg = Ext.Msg.showHelp({
message: 'Morbi in faucibus lorem. Aliquam sollicitudin, mi tincidunt volutpat semper, neque nibh pulvinar sapien',
fn : Ext.emptyFn
});
}
}
| |
Error message box | (as-msgbox and as-msgbox-error) | YES |  | xtype: 'button',
text: 'click!',
listeners: {
click: function () {
var myMsg = Ext.Msg.showError({
message: 'Morbi in faucibus lorem. Aliquam sollicitudin, mi tincidunt volutpat semper, neque nibh pulvinar sapien',
fn : Ext.emptyFn
});
}
}
|
Warning message box | (as-msgbox and as-msgbox-warning) | YES |  | xtype: 'button',
text: 'click!',
listeners: {
click: function () {
var myMsg = Ext.Msg.showWarning({
message: 'Morbi in faucibus lorem. Aliquam sollicitudin, mi tincidunt volutpat semper, neque nibh pulvinar sapien',
fn : Ext.emptyFn
});
}
}
|
Default message box | (as-msgbox) | YES |  | xtype: 'button',
text: 'click!',
listeners: {
click: function () {
Ext.Msg.show({
title: "title",
message: "message text here",
buttons: Ext.MessageBox.OKCANCEL,
icon: Ext.MessageBox.INFO,
fn: Ext.emptyFn
});
}
}
|
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'
});
}
}
}
|
Tabs | N/A |  | {
xtype: 'tabpanel',
activeTab: 0,
items: [
{
title: 'Tab 1',
html: 'Tab 1 content'
},
{
title: 'Tab 2',
html: 'Tab 2 content'
},
{
title: 'Tab 3',
html: 'Tab 3 content'
},
{
title: 'Tab 4',
html: 'Tab 4 content'
}
]
}
| |
Treepanel | N/A |  | {
xtype: 'treepanel',
collapsible: true,
title: 'Tree Structure',
root: {
text: 'Root Node',
expanded: true,
children: [{
text: 'Item 1',
leaf: true
}, {
text: 'Item 2',
leaf: true
}, {
text: 'Folder',
children: [{
text: 'Item 3',
leaf: true
}]
}]
}
}
| |
Excel grid | as-excel-grid |  | {
xtype: 'grid',
cls: 'as-excel-grid',
store: {
fields:[ 'name', 'email', 'phone'],
data: [
{ name: 'contact1', email: '111@verint.com', phone: '555-111-1224' },
{ name: 'contact2', email: '222@verint.com', phone: '555-222-1234' },
{ name: 'contact3', email: '333@verint.com', phone: '555-222-1244' },
{ name: 'contact4', email: '444@verint.com', phone: '555-222-1254' }
]
},
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
]
}
| |
Breadcrumbs |  | |||
Popover | as-popover |  | {
xtype: 'label',
html: 'tooltip here',
listeners: {
afterrender: function (btn) {
btn.tip = Ext.create('Ext.tip.ToolTip', {
target: btn.getEl(),
dismissDelay: 0,
trackMouse: true,
renderTo: Ext.getBody(),
cls: 'as-popover',
anchor: 'l',
items:[{
xtype: 'panel',
width: 300,
html: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Id venenatis a condimentum vitae sapien. Sagittis eu volutpat odio facilisis mauris sit amet massa vitae. ',
}
],
tbar: [
{
xtype: 'panel',
width: 300,
layout: {
type: 'hbox',
align: 'stretch',
},
items: [
{
xtype: 'label',
height: 31,
flex: 6,
text: 'Header',
}
]
}
]
});
},
destroy: function (btn) {
if (btn.tip) {
btn.tip.destroy();
}
}
},
}
|
📐 Additional guidance
Content | |
|---|---|
Accessibility | |
Mobile | |
Best practices | |
Related |