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

现在我想设置面板的样式以便更改：

标签栏的背景
按钮背景
身体背景。

有人可以帮我这个吗？

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

按钮部分更难，因为你有边框，阴影，不同的状态（活动，悬停，......）=＆gt;我只在Chrome中对它进行了测试，但这不适用于＆lt; 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/

样式Extjs组件

1 个答案: