Component | CSS Class | Class added with component | Screenshot | Usage Example |
|---|
Text field | | |  | |
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) | 
|  | {
xtype: 'combo',
store: ['item1', 'item2', 'item3'],
} |
|
Dropdown/Menu | (as-combomenu) | |  | {
xtype: 'combo',
showSplitter: false,
editable: false,
store: ['item1', 'item2', 'item3'],
} |
|
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) | |  | {
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 | | |   | {
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) | |  | {
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) | |  | {
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) | |  | {
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) | |  | {
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'
});
}
}
} |
|
| | | | |
Specifications