javascript - 如何使用 style 属性为 Ext js xtype tabpanel 应用样式？

Question

我想通过编写内联 css 结构来更改 Ext.tab.Panle 元素的样式，如以下 xtype : button 元素

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

我想通过以 Json 格式编写这样的 css 来更改选项卡面板标题的样式。可能吗？

以下是我的选项卡元素结构:

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

谢谢。

Answer 1

选项卡标题是 Ext.tab.Tab 的实例，它们是由选项卡面板动态创建的。您可以在选项卡面板的元素上提供 tabConfig 配置来自定义它们，并且由于它们是 Ext.Component 的子类，当然您也可以设置 style配置:

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