将自定义 css 类添加到 ExtJS 4.0.7 面板标头

Add custom css class to ExtJS 4.0.7 Panel header

本文关键字：ExtJS css 自定义 添加      更新时间：2023-09-26

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

使用基本的 Ext 面板：

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

title 属性触发一个标头，其中包含一系列基于 x-panel-header 的类。在旧版本的 Ext 中，我已经阅读了有关使用 header 和 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.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 {}
相关文章：