从 Ext JS 4.1 中的列菜单重命名列标题

Posted 2023-02-26

【中文标题】从 Ext JS 4.1 中的列菜单重命名列标题

【英文标题】：Renaming column header from column menu in Ext JS 4.1

【发布时间】：2012-06-15 11:24:15

【问题描述】：

是否可以在此菜单中添加一个项目以重命名列标题？

【参考方案1】：

这个问题似乎有点含糊，我相信附上的图片让我失望。

自定义网格标题菜单 (Answer)..

查看任一答案。

我的最终产品我什至进一步定制了我的答案：

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'
    );

【讨论】：

确保在访问“this.headerCt”之前调用“this.callParent(arguments)”。我遇到了问题，因为我在调用“this.callParent(arguments)”之前尝试访问“this.headerCt”，而“this.headerCt”未定义。你的例子帮助我解决了这个问题。谢谢。

【参考方案2】：

你应该可以做到的。

在 Ext.grid.header.Container 对象的“menucreate”事件上添加一个监听器。该委托将向您传递菜单的引用，然后您可以操作菜单。

例子

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
);