css - 样式 Extjs 组件

Question

我创建了一个 extjs 选项卡面板，如下所示：

menuTabs = Ext.create('Ext.tab.Panel', {
    border: 0,
    region: 'center',

    cls: 'mainTabPanel',

    items: [
        {
            title: 'Tab 1',
            html: 'Tab 1 Details'
        },
        {
        title: 'Tab 2',
        html: 'Tab 2 Details'
        }
    ]
});

现在我想为面板设置样式以进行更改：

1. 标签栏背景
2. 按钮背景
3. 身体背景。

有人可以帮我弄这个吗？

Answer 1

第一个和最后一个很容易：

/* 1. background of tab bar */
.mainTabPanel .x-tab-bar-default-top {
    background: green;
}

/* 3. body background.*/
.mainTabPanel .x-panel-body-default {
    background: pink;
}

按钮部分更难，因为你有边框，阴影，不同的状态（活动，悬停，...）=>我只在 Chrome 中测试过，这在 < IE9 中不起作用，还没有在其他浏览器中测试过. 您需要检查每个浏览器并确保其正常工作，并可能为按钮添加与浏览器相关的 css。

/* 2. button background */

.mainTabPanel .x-tab-default {
    background: yellow;
    border: none;
    box-shadow: none;
}
.mainTabPanel .x-tab-default.x-tab-default-active {
    background: purple;
    border: none;
    box-shadow: none;
}

http://jsfiddle.net/Vandeplas/hsELW/1/