Versions Compared

Version Old Version 12 New Version Current
Changes made by

dana lees kunik

dana lees kunik

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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)

Status
colourGreen
titleYES

Image Modified

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

Dropdown/Menu

(as-combomenu)

Status
colourGreen
titleYES

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
colourGreen
titleYES

Image Modified

Code Block
{
  xtype: 'datefield'
}

Time field

(as-time-field)

Status
colourGreen
titleYES

Image Modified

Code Block
{
  xtype: 'timefield'
}

Number field

(as-number-field)

Status
colourGreen
titleYES

Image Modified

Code Block
{
  xtype: 'numberfield'
}

Split button

(as-split-btn)

Status
colourGreen
titleYES

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
colourGreen
titleYES

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
colourGreen
titleYES

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
colourGreen
titleYES

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
colourGreen
titleYES

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
colourGreen
titleYES

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
colourGreen
titleYES

Image Modified

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
colourGreen
titleYES

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
colourGreen
titleYES

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
colourGreen
titleYES

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
colourGreen
titleYES

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