CODEWITHSUNDEEP
cssextjsextjs6
Uthman
Uthman

Reputation: 9807

ExtJS: Is there a way to shift tabpanel's Tab icon from left to right of the Tab's title?

Does ExtJS provide a way to show icon for tab title in front of title instead of the default behavior?

Default Behviour:

---------------
| +  Tab 1    |
---------------

Required Behavior:

---------------
|  Tab 1  +   |
---------------

Code Example:

Ext.create('Ext.tab.Panel', {
  plain: true,
  items: [{
    title: "Tab 1",
    iconCls: "icon-class-plus",
  }, {
    title: "Tab 2",
  }],
  renderTo: Ext.getBody()
});

icon-class-plus is a CSS class that contain &:after pseudo element for setting a glyph icon for plus sign.

Upvotes: 1

Views: 405

Answers (1)

Evan Trimboli
Evan Trimboli

Reputation: 30082

Use the iconAlign config:

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.tab.Panel', {
            items: [{
                title: "Tab 1",
                iconCls: "x-fa fa-car",
                iconAlign: 'right'
            }],
            renderTo: Ext.getBody()
        });
    }
});

Fiddle

Upvotes: 3

Related Questions