javascript - 将自定义 css 类添加到 ExtJS 4.0.7 面板标题

Question

我正在尝试找到一种使用title 将自定义CSS 类添加到Ext.panel.Panel 的方法。

使用基本的 Ext 面板:

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

title 属性触发带有一系列基于 x-panel-header 的类的 header 。在旧版本的 Ext 中，我读到过使用 header 和 headerCfg 属性来自定义面板标题属性，但它们似乎都在 4.0.7 中不存在

我还尝试构建自定义 Ext.panel.Header，并将其添加为 dockedItem，但它使用一组完全不同的类呈现并且不表现得像“默认” header 。

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

它使用以下类呈现:

x-container emp-panel-header-alt x-container-default x-horizo​​ntal x-container-horizo​​ntal x-container-default-horizo​​ntal x-top x-container-top x-container-default-顶部 x-unselectable x-docked x-docked-top x-container-docked-top x-container-default-docked-top

但是，自动生成的标题具有面板标题类:

x-panel-header x-panel-header-default x-horizo​​ntal x-panel-header-horizo​​ntal x-panel-header-default-horizo​​ntal 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")
//不起作用，.header 无效

myPanel.getHeader().addClass("some-custom-class")
//getHeader() 有效，但返回未定义

Answer 1

想不出任何简单的方法来使用 4.0.7 将类添加到 header 。您可以定义自己的类，它从 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 {}