CODEWITHSUNDEEP
extjsgridextjs4.1
ilhan
ilhan

Reputation: 8995

Renaming column header from column menu in Ext JS 4.1

enter image description here

Is it possible add an item to this menu in order to rename the column header?

Upvotes: 4

Views: 2531

Answers (2)

chemoish
chemoish

Reputation: 1226

The question seems kind of vague and I believe the image attached is throwing me off.

Customizing a grid header menu (Answer)..

See either answer.

My final product I have even customized my answer further:

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

    this.headerCt.on('headerclick', function (header, column, event, html) {
        if (column.xtype == 'rownumberer') {
            return false;
        };

        header.showMenuBy(column.el.dom, column);
    }, this);

    this.headerCt.on('menucreate', function (header, column, event, html) {
        var menu = header.getMenu();

        this.createHeaderMenu(menu);
    }, this);
},

createHeaderMenu: function (menu) {
    menu.removeAll();

    // simulate header menu to be plain (menu is already created at this point)
    menu.addCls(Ext.baseCSSPrefix + 'menu-plain');
    menu.name = 'report_data_header_menu';

    menu.add({
        name: 'sort_asc',
        text: 'Sort Ascending'
    }, {
        name: 'sort_desc',
        text: 'Sort Descending'
    }, {
        name: 'remove_column',
        text: 'Remove'
    });
}

Upvotes: 2

ctong
ctong

Reputation: 185

You should be able to do it.

Add a listener on the 'menucreate' event on the Ext.grid.header.Container object. This delegate will pass you the reference of the menu then you can manipulate the Menu.

example

var gridHeader = gridPanelInstance.getView().headerCt; //return the Header Container 

gridHeader.on('menucreate', function(gridHeaderContainer, menu, option) {

    // do whatever you want with the menu here...  eg: add/remove/ edit menu item
});

Upvotes: 0

Related Questions