如何更改列标题extjs

Question

我正在尝试在渲染网格后更改 Ext.grid.Panel 的列标题。 我/正在尝试在下一个

之前更改列

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

单击列菜单 -> 列后，不显示新的标题值， 但该列本身有新的标题。 我该如何解决这个问题

Answer 1

更改 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: "[email protected]",
                phone: "989681806",
            },
            {
                name: "Sunil",
                email: "SunilkumarGmail.com",
                phone: "8053173589",
            },
            { name: "Sushil", email: "[email protected]", phone: "9896133066" },
            {
                name: "Puneet",
                email: "[email protected]",
                phone: "9729810025",
            },
            {
                name: "Rahul",
                email: "[email protected]",
                phone: "9050438741",
            },
            {
                name: "Anil2",
                email: "[email protected]",
                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();
});