extjs - タブ自体ではなく、TabBar の TAB に CSS クラスを追加します。

Question

これは、私がやりたいことを視覚化するためのスクリーンショットです。

アイコンのない追加のタブがあります (終了とプロジェクトの間)。青く強調表示された行は、インスペクター内の要素そのものです。

私の目標は、タブパネルではなくタブバーでタブの幅を 5px に設定することです。そのため、タブのアイコンの間にスペーサーがあります。

その要素を指す非常に具体的なルールを作成し、このルール内で !important タグを使用して幅を 5px に設定できるように、CSS クラスを手動で追加しようとしました。

.x-tab .x-tab-normal .x-item-disabled .x-iconalign-center .x-tab-icon .x-layout-box-item .x-stretched
{
  width:5px !important;
}

残念ながら、コンポーネント階層の特定のレベルにクラスを追加する方法が見つかりませんでした。

そこで、そのコンポーネントの既存の CSS クラス (.x-item-disabled) を置き換えようとしました。.x-item-disabled を .fake に変更し、それに応じて CSS ルールを作成しました... 機能せず、最初のケースでは、インスペクターのコンポーネントの css クラスはまったく変更されませんでした..

煎茶でできることではないので、そのようにする必要があると確信しています。

誰かが私を助けてくれますか？

Answer 1

Ext.tab.BarとExt.tab.TabプライベートクラスでありExt.tab.Panel、その機能を公開していないようです. これらのタブは、パネル項目の構成に基づいて作成されますが、渡すデータはそれらに直接マップされません。実際、clsまたはstyleプロパティを項目構成に適用すると、関連するタブではなく、パネルのコンテンツに移動します。ただし、パネルが初期化された後にタブを変更できます。

これを試して：

Ext.create('Ext.TabPanel', {
    fullscreen: true,
    tabBarPosition: 'bottom',

    defaults: {
        styleHtmlContent: true
    },

    items: [
        {
            title: 'Home',
            iconCls: 'home',
            html: 'Home Screen'
        },
        {
            title: '',
            iconCls: 'dummy',
            html: ''
        },
        {
            title: 'Contact',
            iconCls: 'user',
            html: 'Contact Screen'
        }
    ],

    initialize: function() {
        // get spacer by position, it's ugly but it works
        // without extending Sencha components
        var spacer = this.getTabBar().getAt(1);
        // of course here you could apply a CSS class
        // if you prefer
        spacer.setStyle('width:5px; min-width:5px;');
        // let's also disable the button
        spacer.setDisabled(true);
        // and remove the icon since it is mandatory in Panel
        // config but we don't really want it
        spacer.setIcon(false);
    }

});

フィドルを参照してください。

Answer 2

this.callParent(arguments);を追加 します。

回答1の初期化関数のコード