Question

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

到目前为止，我已经为Tab标签实现了不同的颜色。我创建了一个包含以下属性的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创建了一个演示版。我希望这有助于/指导您实现您的要求。

CODE SNIPPET

CSS部分

<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部分

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);
            }
        });
    }
});

在ExtJS 4.2中更改tabpanel标签下的栏

1 个答案: