如何使用style属性为Ext js的xtype表面板应用样式

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

本文关键字：表面 xtype 应用 样式 js style 何使用 属性 Ext      更新时间：2023-09-26

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

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

我想通过在Json格式中编写像这样的css来改变选项卡面板标题的样式。这可能吗?

下面是我的tabpanel元素结构:

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

谢谢。

标签头是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"
}]

小提琴:https://fiddle.sencha.com/小提琴/o7c

相关文章：