Question

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

使用基本的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

Answer 1

无法想到用4.0.7向标题添加类的任何简单方法。您可以定义自己的类，该类从Ext.panel.Panel扩展并具有headerCls config：

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 {}

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

1 个答案: