1

を使用してカスタム css クラスを Ext.panel.Panel に追加する方法を見つけようとしていますtitle。

基本的な Ext パネルの使用:

new Ext.panel.Panel({
    title: 'Test',
    items: []
});

プロパティはtitle、 に基づいた一連のクラスでヘッダーをトリガーしますx-panel-header。header古いバージョンの Ext で、 aとpropertyの両方を使用してパネル ヘッダーのプロパティをカスタマイズする方法について読んだことがありheaderCfgますが、4.0.7 からはどちらもないようです。

また、カスタムExt.panel.Headerのビルドを試み、それを として追加しましたdockedItemが、まったく異なるクラスのセットでレンダリングされ、「デフォルト」ヘッダーのように動作しません。

dockedItems: [
    new Ext.panel.Header({
        title: 'Test',
        cls: 'emp-panel-header-alt'
        })
    ]

次のクラスでレンダリングされます。

x-container emp-panel-header-alt x-container-default x-horizontal x-container-horizontal x-container-default-horizontal x-top x-container-top x-container-default-top x-unselectable x-docked x-docked-top x-container-docked-top x-container-default-docked-top

ただし、自動生成されたヘッダーには、次のパネル ヘッダー クラスがあります。

x-panel-header x-panel-header-default x-horizontal x-panel-header-horizontal x-panel-header-default-horizontal x-top x-panel-header-top x-panel-header-default-top x-unselectable x-docked x-docked-top x-panel-header-docked-top x-panel-header-default-docked-top

また、インスタンス化後のクラスを追加しようとしました:

myPanel.header.addClass("some-custom-class") // Doesn't work, .header not valid

myPanel.getHeader().addClass("some-custom-class") // getHeader() valid, but returns undefined

4

1 に答える 1

2

4.0.7 でヘッダーにクラスを追加する簡単な方法は考えられません。Ext.panel.Panel から拡張され、headerCls 構成を持つ独自のクラスを定義できます。

Ext.define('My.Panel', {
    extend: 'Ext.panel.Panel',

    headerCls: '',

    onRender: function() {
        this.callParent(arguments);

        if (this.headerCls) {
            this.header.addClass(this.headerCls);
        }
    }
});

...しかし、単純なクラスを追加するだけでは、少し手間がかかりすぎるかもしれません。

ただし、パネル自体にcls構成を追加し、対応する CSS セレクターでヘッダーをアドレス指定することはできませんでした:

.my-class .x-panel-header {}
于 2013-11-05T19:43:30.430 に答える