1

我正在尝试找到一种方法来将自定义 css 类添加到使用title.

使用基本的分机面板：

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

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

我还尝试构建一个 custom Ext.panel.Header，并将其添加为 a 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 回答