How to change column headers extjs

Question

I'm trying to change the column title of a Ext.grid.Panel afterrender the grid. I/m trying to change column by next

this.headerCt.getHeaderAtIndex(j).setText(column_.text);

After i click to the column-menu -> Columns, the new header value is not displayed, but the column itself has the new header. How can I solve this problem

Answer 1

Change column headers index in Ext JS:

Ext.onReady(function () {
    var userStore = Ext.create("Ext.data.Store", {
        autoLoad: "false",
        fields: [{ name: "name" }, { name: "email" }, { name: "phone" }],
        data: [
            {
                name: "Anil",
                email: "AnilThakurr54@gmail.com",
                phone: "989681806",
            },
            {
                name: "Sunil",
                email: "SunilkumarGmail.com",
                phone: "8053173589",
            },
            { name: "Sushil", email: "Sushil@gmail.com", phone: "9896133066" },
            {
                name: "Puneet",
                email: "PuneetChawla@gmail.com",
                phone: "9729810025",
            },
            {
                name: "Rahul",
                email: "RahulSain@gmail.com",
                phone: "9050438741",
            },
            {
                name: "Anil2",
                email: "Ak3217106@gmail.com",
                phone: "9729935023",
            },
        ],
    });
    Ext.create("Ext.window.Window", {
        height: 250,
        width: 400,
        xtype: "panel",
        layout: "fit",
        title: "Change Header Of Extjs Grid Column on Button Click",
        items: [
            {
                layout: "border",
                height: 350,
                renderTo: Ext.getBody(),
                items: [
                    {
                        xtype: "panel",
                        region: "north",
                        layout: "fit",
                        items: [
                            {
                                xtype: "grid",
                                id: "GridId",
                                store: userStore,
                                tbar: [
                                    {
                                        text: "Change",
                                        iconCls: "employee-add",
                                        handler: function () {
                                            var grid = Ext.getCmp("GridId");
                                            grid.headerCt
                                                .getHeaderAtIndex(0)
                                                .setText("test");
                                            grid.headerCt
                                                .getHeaderAtIndex(1)
                                                .setText("MobileNo");
                                        },
                                    },
                                    {
                                        text: "by Default",
                                        iconCls: "employee-add",
                                        handler: function () {
                                            var grid = Ext.getCmp("GridId");
                                            grid.headerCt
                                                .getHeaderAtIndex(0)
                                                .setText("Name");
                                            grid.headerCt
                                                .getHeaderAtIndex(1)
                                                .setText("Email Address");
                                        },
                                    },
                                ],
                                columns: [
                                    {
                                        header: "Name",
                                        width: 100,
                                        sortable: true,
                                        dataIndex: "name",
                                    },
                                    {
                                        header: "Email Address",
                                        width: 150,
                                        dataIndex: "email",
                                    },
                                    {
                                        header: "Phone Number",
                                        flex: 1,
                                        dataIndex: "phone",
                                    },
                                ],
                            },
                        ],
                        dockedItems: [
                            {
                                xtype: "pagingtoolbar",
                                itemId: "pagingLog",
                                store: userStore,
                                dock: "bottom",
                                displayInfo: true,
                            },
                        ],
                    },
                ],
            },
        ],
    }).show();
});