How to apply style for Ext js xtype tabpanel using style property?

Question

I want to change style for Ext.tab.Panle element by writing inline css structure as like the following xtype : button element

{
   xtype: "button",
   itemId: "imageUploadButton1",
   text: "Uploader",
   style: {
      background : '#C81820'
   }
}

I want to change the style of tab-panel's header by writing css like this in a Json format. Is it possible?

Following is my tabpanel elemental structure:

    {
        xtype:"tabpanel",
        activeTab:0,
        items:[{
            xtype:"panel",
            title:"SHOPABLE IMAGES",
        },{
            xtype:"panel",
            title:"LAYOUT SETTINGS"
        },{
            xtype:"panel",
            title:"HOTSPOT SETTINGS"
        }]
    }

Thanks.

Answer 1

The tab headers are instances of Ext.tab.Tab, which are created dynamically by the tab panel. You can provide a tabConfig configuration on the tab panel's items to customize them, and since they're subclasses of Ext.Component, of course you can also set the style config:

items:[{
    xtype: "panel",
    title: "SHOPABLE IMAGES",
    tabConfig: {
        style: {
            background: '#C81820'
        }
    }
},{
    xtype: "panel",
    title: "LAYOUT SETTINGS"
},{
    xtype: "panel",
    title: "HOTSPOT SETTINGS"
}]

Fiddle: https://fiddle.sencha.com/#fiddle/o7c