javascript - Add custom css class to ExtJS 4.0.7 Panel header

admin管理员组
文章数量:1024638

I'm trying to find a way to add a custom css class to an Ext.panel.Panel using a title.

Using a basic Ext panel:

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

The title property triggers a header with a series of classes based off of x-panel-header. In older versions of Ext, I've read about using both a header and headerCfg property to customize the panel header properties but they both seem absent from 4.0.7

I also tried building a custom Ext.panel.Header, and added it as a dockedItem, but it renders with an entirely different set of classes and doesn't behave like the "default" header.

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

It renders with the following classes:

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

However, the auto-generated header has the panel header classes:

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

Also tried adding a class post-instantiation:

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

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

I'm trying to find a way to add a custom css class to an Ext.panel.Panel using a title.

Using a basic Ext panel:

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

I also tried building a custom Ext.panel.Header, and added it as a dockedItem, but it renders with an entirely different set of classes and doesn't behave like the "default" header.

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

It renders with the following classes:

However, the auto-generated header has the panel header classes:

Also tried adding a class post-instantiation:

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

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

Share Improve this question edited Nov 5, 2013 at 19:59 asked Nov 5, 2013 at 18:30 helion3 37.6k16 gold badges64 silver badges112 bronze badges

So with 4.0+ I suppose you mean 4.0.x ? With 4.1.x and 4.2.x you can use the header config. – matt Commented Nov 5, 2013 at 19:03
4.0.7. Updated the post – helion3 Commented Nov 5, 2013 at 19:09

Add a ment |

1 Answer 1

Sorted by: Reset to default 2

Can't think of any easy way to add a class to the header with 4.0.7. You could define your own class which extends from Ext.panel.Panel and has a headerCls config:

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

    headerCls: '',

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

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

...but that might be a little too much effort for just adding a simple class.

However, couldn't you just add a cls config on the panel itself and address the header with a corresponding CSS selector:

.my-class .x-panel-header {}

I'm trying to find a way to add a custom css class to an Ext.panel.Panel using a title.

Using a basic Ext panel:

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

I also tried building a custom Ext.panel.Header, and added it as a dockedItem, but it renders with an entirely different set of classes and doesn't behave like the "default" header.

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

It renders with the following classes:

However, the auto-generated header has the panel header classes:

Also tried adding a class post-instantiation:

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

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

I'm trying to find a way to add a custom css class to an Ext.panel.Panel using a title.

Using a basic Ext panel:

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

I also tried building a custom Ext.panel.Header, and added it as a dockedItem, but it renders with an entirely different set of classes and doesn't behave like the "default" header.

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

It renders with the following classes:

However, the auto-generated header has the panel header classes:

Also tried adding a class post-instantiation:

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

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

Share Improve this question edited Nov 5, 2013 at 19:59 asked Nov 5, 2013 at 18:30 helion3 37.6k16 gold badges64 silver badges112 bronze badges

So with 4.0+ I suppose you mean 4.0.x ? With 4.1.x and 4.2.x you can use the header config. – matt Commented Nov 5, 2013 at 19:03
4.0.7. Updated the post – helion3 Commented Nov 5, 2013 at 19:09

Add a ment |

1 Answer 1

Sorted by: Reset to default 2

Can't think of any easy way to add a class to the header with 4.0.7. You could define your own class which extends from Ext.panel.Panel and has a headerCls config:

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

    headerCls: '',

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

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

...but that might be a little too much effort for just adding a simple class.

However, couldn't you just add a cls config on the panel itself and address the header with a corresponding CSS selector:

.my-class .x-panel-header {}

本文标签： javascriptAdd custom css class to ExtJS 407 Panel headerStack Overflow

版权声明：本文标题：javascript - Add custom css class to ExtJS 4.0.7 Panel header - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://it.en369.cn/questions/1745599406a2158367.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

369IT编程

javascript - Add custom css class to ExtJS 4.0.7 Panel header - Stack Overflow

1 Answer 1

1 Answer 1

更多相关文章