Content Comparison

...

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

🧐 Specifications

Component

Class to use

CSS Class

Class added with component

Screenshot

Usage Example

Text field

Image Modified

Code Block
{ xtype: 'textfield' }

Search field

as-searchfield

Image Modified

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)

added automatically

Status

colour	Green
title	YES

Image Modified

Code Block
{ xtype: 'combo', store: ['item1', 'item2', 'item3'], }

Dropdown/Menu

(as-combomenu)

Status

colour	Green
title	YES

Image Modified

Code Block
{ xtype: 'combo', showSplitter: false, editable: false, store: ['item1', 'item2', 'item3'], }

Icon buttons

as-icon-btn

Image Modified

Code Block
{ xtype:'button', glyph: 'xe827@lux-theme-icon' }

Toggle button

as-togglebutton

Image Modified

Code Block
{ xtype: 'button', glyph: 'xe8bf@lux-theme-icon', text: 'Toggle Button', scale: 'medium', enableToggle: true, componentCls: 'as-togglebutton' }

Date field

(as-date-field)

Status

colour	Green
title	YES

Image Modified

Code Block
{ xtype: 'datefield' }

Time field

(as-time-field)

Status

colour	Green
title	YES

Image Modified

Code Block
{ xtype: 'timefield' }

Number field

(as-number-field)

Status

colour	Green
title	YES

Image Modified

Code Block
{ xtype: 'numberfield' }

Split button

(as-split-btn)

Status

colour	Green
title	YES

Image Modified

Code Block
{ xtype: 'splitbutton', text: 'Click', menu: { items: [{ text: 'item1' }, { text: 'item2' }] } }

Primary button

as-btn-primary

Image Modified

Code Block
{ xtype: 'button', text : 'Submit', cls: 'as-btn-primary' }

Info message box

(as-msgbox and as-msgbox-info)

Status

colour	Green
title	YES

Image Modified

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)

Status

colour	Green
title	YES

Image Added

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)

Status

colour	Green
title	YES

Image Modified

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)

Status

colour	Green
title	YES

Image Modified

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)

Status

colour	Green
title	YES

Image Modified

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

Status

colour	Green
title	YES

Image Modified

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)

Status

colour	Green
title	YES

Image Modified

Warning tooltip

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)

Status

colour	Green
title	YES

Image Modified

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)

Status

colour	Green
title	YES

Image Modified

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)

Status

colour	Green
title	YES

Image Modified

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

Image Added

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

Image Added

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

Image Added

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' }
    ]
}

Breadcrumbs

Image Added

Popover

as-popover

Image Added

Code Block

{
    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

Version	Old Version 13	New Version Current
Changes made by	dana lees kunik	dana lees kunik
Saved on	Nov 17, 2020	Jan 13, 2021

Versions Compared

Key

🧐 Specifications

📐 Additional guidance