css - 在 ExtJS 4.2 中更改选项卡面板标签下的栏

Question

我正在使用 ExtJS 4.2 开发 Web 应用程序，我希望布局看起来像这样:

到目前为止，我已经为选项卡标签实现了不同的颜色。我制作了一个具有以下属性的 css 文件:

.x-tab-first.x-tab-default-top{
    background: rgb(0, 169, 180) !important;
}

.x-tab-second.x-tab-default-top{
    background: rgb(251, 183, 18) !important;
}

.x-tab-third.x-tab-default-top{
    background: rgb(2, 153, 130) !important;
}

并且在选项卡面板的每个选项卡中，我将相应的类指定为它们的 cls，因此第一个选项卡将 x-tab-first 作为其 cls，依此类推。

但正如您在下图中看到的，如果我点击“在此处找到我们”，选项卡内容会相应更改，但下面的栏不会更改:

对于其他两个选项卡，下面的栏也没有改变，它只是保持原样。

我试过这个:

.x-tab-second-active.x-tab-bar-body{
    background: rgb(251, 183, 18) !important;
}

但是我不太确定在哪里以及如何放置这段代码。

我希望选项卡标题下方的栏也跟随颜色。

Answer 1

根据您的要求，您需要添加 activeTab在 tabchange 上手动将 cls 添加到 tabbar-strip事件。

在这个 FIDDLE ，我已经使用 tabpanel 创建了一个演示.我希望这会帮助/指导您实现您的要求。

代码片段

CSS part

<style>
    .x-my-tabpanel .x-tab-bar {
        background: red;
    }

    .x-my-tabpanel .x-tab-default-top {
        border: 0px !important;
        box-shadow: 0px 0px 0px;
    }

    .x-my-tabpanel .x-tab-bar-strip {
        top: 23px;
        height: 5px !important;
    }

    .x-tab-first.x-tab-default-top,
    .x-tab-first.x-tab-bar-strip {
        background: rgb(0, 169, 180);
        border-color: rgb(0, 169, 180);
    }

    .x-tab-second.x-tab-default-top,
    .x-tab-second.x-tab-bar-strip {
        background: rgb(251, 183, 18);
        border-color: rgb(251, 183, 18);
    }

    .x-tab-third.x-tab-default-top,
    .x-tab-third.x-tab-bar-strip {
        background: rgb(2, 153, 130);
        border-color: rgb(2, 153, 130);
    }

    .x-my-tabpanel .x-tab .x-tab-inner {
        color: #fff;
    }

</style>

ExtJS part

Ext.application({
    name: 'Fiddle',

    launch: function () {
        Ext.create('Ext.tab.Panel', {
            height: 200,
            renderTo: Ext.getBody(),
            cls: 'x-my-tabpanel',
            activeTab: 0,
            defaults: {
                padding: 10
            },
            items: [{
                title: 'What to Expect',
                html: 'What to Expect'
            }, {
                title: 'Find us here',
                html: 'Find us here'
            }, {
                title: 'Game Machenics',
                html: 'Game Machenics'
            }],
            listeners: {
                /*
                 * this event will fire on view render
                 */
                afterrender: function (panel) {
                    var clsArr = ['first', 'second', 'third'];
                    panel.query('tab').forEach((item, index) => {
                        let cls = `x-tab-${clsArr[index]}`;
                        item.addCls(cls);
                        item.cls = cls;
                    });
                    this.addToStripCls();
                },
                /*
                 * this event will fire on tab change
                 */
                tabchange: function (panel, newtab) {
                    this.addToStripCls();
                }
            },
            /*
             * this function will set active tab cls to strip
             * before to adding we need to remove previous cls
             */
            addToStripCls: function () {
                var strip = Ext.get(this.el.query('.x-tab-bar-strip')[0]),
                    clsArr = ['first', 'second', 'third']

                clsArr.forEach(el => {
                    if (strip.hasCls(`x-tab-${el}`)) {
                        strip.removeCls(`x-tab-${el}`);
                    }
                });
                strip.addCls(this.activeTab.tab.cls);
            }
        });
    }
});