Component | CSS Class | Class added with component | 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) | |  | | Code Block |
|---|
{
xtype: 'combo',
store: ['item1', 'item2', 'item3'],
} |
|
Dropdown/Menu | (as-combomenu) | |  | | Code Block |
|---|
{
xtype: 'combo',
showSplitter: false,
editable: false,
store: ['item1', 'item2', 'item3'],
} |
|
Icon buttons | as-icon-btn | |  | |
Toggle button | as-togglebutton | |  | | Code Block |
|---|
{
xtype: 'button',
glyph: 'xe8bf@lux-theme-icon',
text: 'Toggle Button',
scale: 'medium',
enableToggle: true,
componentCls: 'as-togglebutton'
} |
|
Date field | (as-date-field) | |  | | Code Block |
|---|
{
xtype: 'datefield'
} |
|
Time field | (as-time-field) | |  | | Code Block |
|---|
{
xtype: 'timefield'
} |
|
Number field | (as-number-field) | |  | | Code Block |
|---|
{
xtype: 'numberfield'
} |
|
Split button | (as-split-btn) | |  | | Code Block |
|---|
{
xtype: 'splitbutton',
text: 'Click',
menu: {
items: [{
text: 'item1'
}, {
text: 'item2'
}]
}
} |
|
Primary button | as-btn-primary | |  | | Code Block |
|---|
{
xtype: 'button',
text : 'Submit',
cls: 'as-btn-primary'
} |
|
Info message box | (as-msgbox and as-msgbox-info) | |  | | Code Block |
|---|
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) | | | | Code Block |
|---|
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) | |  | | Code Block |
|---|
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) | |  | | Code Block |
|---|
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) | |  | | Code Block |
|---|
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 | | |  
| | Code Block |
|---|
{
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) | |  | | Code Block |
|---|
{
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) | |  | | Code Block |
|---|
{
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) | |  | | Code Block |
|---|
{
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) | |  | | Code Block |
|---|
{
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 | |  | | Code Block |
|---|
{
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 | |  | | Code Block |
|---|
{
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 (/wiki/spaces/AR/pages/745406948 ) | as-excel-grid | |  | | Code Block |
|---|
{
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' }
]
} |
|