Versions Compared

Version Old Version 22 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.

...

(as-date-field)

(as-time-field)

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)

Status
colourGreen
titleYES

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

Dropdown/Menu

(as-combomenu)

Status
colourGreen
titleYES

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

Icon buttons

as-icon-btn

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

Toggle button

as-togglebutton

Date field

Status
colourGreen
titleYES

Image Removed

Code Block
{
    xtype: 'datefieldbutton'
}

Time field

Status
colourGreen
titleYES

Image Removed

Code Block
{
  xtype: 'timefield'
}

Number field

(as-number
,
    glyph: 'xe8bf@lux-theme-icon',
    text: 'Toggle Button',
    scale: 'medium',
    enableToggle: true,
    componentCls: 'as-togglebutton'
}

Date field

(as-date-field)

Status
colourGreen
titleYES

Image RemovedImage Added

Code Block
{
  xtype: 'numberfielddatefield'
}

Split buttonTime field

(as-splittime-btnfield)

Status
colourGreen
titleYES

Image RemovedImage Added

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

Primary button

as-btn-primary

Image Removed

}

Number field

(as-number-field)

Status
colourGreen
titleYES

Image Added

Code Block
{
  xtype: 'numberfield'
}

Split button

(as-split-btn)

Status
colourGreen
titleYES

Image Added

Code Block
{
  xtype: 'buttonsplitbutton',
  text : 'SubmitClick',
  clsmenu: 'as-btn-primary'
}

Info message box

(as-msgbox and as-msgbox-info)

Status
colourGreen
titleYES

Image Removed

Code Block
xtype: 'button',{
    items: [{
      text: 'click!item1',
listeners: {     click:}, function{
() {     text: 'item2'
  var myMsg = Ext.Msg.showInfo({ }]
   }
}

Primary button

as-btn-primary

Image Added

Code Block
{
  xtype: 'button',
  text message: 'Submit'Morbi,
in faucibus lorem. Aliquam sollicitudin, mi tincidunt volutpat semper, neque nibh pulvinar sapien',
  cls: 'as-btn-primary'
}

Info message box

(as-msgbox and as-msgbox-info)

Status
colourGreen
titleYES

Image Added

Code Block
xtype: 'button',
text: 'click!',
listeners: {
    click: function () {
        var fnmyMsg := Ext.Msg.emptyFnshowInfo({
        });     }
}
Help 
message
box

(as-msgbox and as-msgbox-help)

Status
colourGreen
titleYES

Code Block
xtype: 'button',
text: 'click!',
listeners: {
    click: function () {: 'Morbi in faucibus lorem. Aliquam sollicitudin, mi tincidunt volutpat semper, neque nibh pulvinar sapien',
           var myMsgfn =: Ext.Msg.showHelp({emptyFn
        });
   message: 'Morbi in faucibus lorem. Aliquam sollicitudin, mi tincidunt volutpat semper, neque nibh pulvinar sapien',
 }
}

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 fn := Ext.emptyFn
.Msg.showHelp({
       });     }
}
Error 
message
box

(as-msgbox and as-msgbox-error)

Status
colourGreen
titleYES

Image Removed

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 
: '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-warningerror)

Status
colourGreen
titleYES

Image RemovedImage Added

Code Block
xtype: 'button',
text: 'button',
text: 'click!',
listeners: {
    click: function () {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 Added

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 Added
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 Added

Image Added

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 Added

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 Added

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 Added

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 Added

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',
                     var myMsg = Ext.Msg.showWarning({
 width: 300,
           message: 'Morbi in faucibus lorem. Aliquam sollicitudin, mi tincidunt volutpat semper, neque nibh pulvinarhtml: sapien''Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore fnmagna : Extaliqua.emptyFn Id venenatis a condimentum vitae sapien. Sagittis eu });volutpat odio facilisis mauris  }
}

Default message box

(as-msgbox)

Status
colourGreen
titleYES

Image Removed
Code Block
xtype: 'button',
text: 'click!',
listeners: {sit amet massa vitae. ',
           click: function () {      }
  Ext.Msg.show({             title: "title",],
                messagetbar: "message text here",[
                 buttons: Ext.MessageBox.OKCANCEL,  {
          icon: Ext.MessageBox.INFO,             fnxtype: Ext.emptyFn'panel',    
      });     } }

Tooltips

Status
colourGreen
titleYES

Image Removed

Image Removed

Code Block
{     xtype: 'label',       idwidth: 'tooltipCmp'300,     text: 'Hover to show tooltip',   
 listeners: {         'afterrender':  function () {         layout: {
  Ext.create('Ext.tip.ToolTip', {                   target: 'tooltipCmp',      type: 'hbox',
         title: 'Tooltip Header',                 htmlalign: 'Aliquam sollicitudin, tincidunt mi volutpat semper''stretch',
                      });  },
      }     } }

Error tooltip

(as-tooltip-error)

Status
colourGreen
titleYES

Image Removed

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 Removed

Code Block
{            items: [
             xtype: 'label',     id: 'tooltipCmp',     text: 'Hover to show{
tooltip',     listeners: {         'afterrender':  function () {             Ext.create('Ext.tip.ToolTip', {xtype: 'label',                        
target: 'tooltipCmp',                 toolTipType: 'warning',              height: 31,
   title: 'Tooltip Header',                 html: 'Aliquam sollicitudin, tincidunt mi volutpat semper'    flex: 6,
       });         }     } }

Info tooltip

(as-tooltip-info)

Status
colourGreen
titleYES

Image Removed

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 Removed

Code Block
{
    xtype: 'label',   text: 'Header',
                            }
       id: 'tooltipCmp',     text: 'Hover to show tooltip',     listeners: { ]
       'afterrender':  function () {         }
   Ext.create('Ext.tip.ToolTip', {              ]
  target: 'tooltipCmp',         });
       toolTipType: 'help'},
        destroy: function (btn) {
     title:  'Tooltip Header',    if (btn.tip) {
          html: 'Aliquam sollicitudin, tincidunt mi volutpat semper' btn.tip.destroy();
            });
        }
    },
}

📐 Additional guidance

Content

Accessibility

Mobile

Best practices

Related