0

次のように作成された 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. 体の背景。

誰かがこれで私を助けることができますか?

4

1 に答える 1

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/

于 2013-07-22T14:22:04.360 に答える