Extjs4 在列标题下拉菜单{EXTJS 4}中添加自定义按钮

我想在extjs4中网格的列标题下拉菜单中有一个按钮。 这样我就可以添加或删除数据库中链接的列。

任何帮助都将不胜感激。。。

---

谢谢。：）

几个月前我也有同样的问题。我通过扩展（覆盖了方法）解决了这个问题。然而，最近，我发现了另一个需要更少编码的解决方案：在网格小部件创建之后手动添加菜单项

我将在此处发布第二个解决方案：

Ext.create（'Ext.grid.Panel'{
// ...
听众：{
afterrender:function（）{
var menu=this.headerCt.getMenu（）；
菜单。添加([{
文本：“自定义项”，
处理程序：函数（）{
var columnDataIndex=menu.activeHeader.dataIndex；
警报（'列'+columnDataIndex+'的自定义项被按下'）；
}
}]);           
}
}
});

这是。​

更新

---

以下是ExtJs4.1。

根据我所看到的，您应该避免afterrender事件

背景：

我正在构建的应用程序使用具有动态模型的存储。我希望我的网格有一个从服务器获取的可定制模型（这样我就可以为我的可定制网格提供可定制的列）

因为标题不可修改（因为存储被重新加载并破坏了我修改过的现有菜单——使用上面的示例）。可以执行具有相同效果的替代解决方案：

Ext.create（'Ext.grid.Panel'{
// ...
initComponent:函数（）{
//呈现标题和标题菜单
this.callParent（参数）；
//现在您可以访问标头-在标头本身上设置一个事件
此.headerCt.on（'menucreate'，函数（cmp、菜单、eOpts）{
此.createHeaderMenu（菜单）；
}，这个）；
},
createHeaderMenu:功能（菜单）{
menu.removeAll（）；
菜单。添加([
//{此处为自定义项}
//{此处为自定义项}
//{此处为自定义项}
//{此处为自定义项}
]);
}
});

对于那些不仅希望有一个“标准”列菜单，而且希望有像我这样的单独列菜单的人，可以使用以下选项

initComponent: function ()
{
    // renders the header and header menu
    this.callParent(arguments);

    // now you have access to the header - set an event on the header itself
    this.headerCt.on('menucreate', function (cmp, menu, eOpts) {
        menu.on('beforeshow', this.showHeaderMenu);
    }, this);
},

showHeaderMenu: function (menu, eOpts)
{
    //define array to store added compoents in
    if(this.myAddedComponents === undefined)
    {
        this.myAddedComponents = new Array();
    }

    var columnDataIndex = menu.activeHeader.dataIndex,
        customMenuComponents = this.myAddedComponents.length;

    //remove components if any added
    if(customMenuComponents > 0)
    {
        for(var i = 0; i < customMenuComponents; i++)
        {
            menu.remove(this.myAddedComponents[i][0].getItemId());
        }

        this.myAddedComponents.splice(0, customMenuComponents);
    }

    //add components by column index
    switch(columnDataIndex)
    {
        case 'xyz': this.myAddedComponents.push(menu.add([{
                            text: 'Custom Item'}]));

                break;
    }
}

initComponent:function（）
{
//呈现标题和标题菜单
this.callParent（参数）；
//现在您可以访问标头-在标头本身上设置一个事件
此.headerCt.on（'menucreate'，函数（cmp、菜单、eOpts）{
menu.on（'beforeshow'，this.showHeaderMenu）；
}，这个）；
},
ShowHeader菜单：功能（菜单，eOpts）
{
//定义数组以存储添加的组件
if（this.myAddedComponents==未定义）
{
this.myAddedComponents=新数组（）；
}
var columnDataIndex=menu.activeHeader.dataIndex，
customMenuComponents=this.myAddedComponents.length；
//如果添加了任何组件，请将其移除
如果（customMenuComponents>0）
{
对于（变量i=0；i

我接受了@nobbler的答案，并为此创建了一个插件：

Ext.define('Ext.grid.CustomGridColumnMenu', {
    extend: 'Ext.AbstractPlugin',
    init: function (component) {
        var me = this;

        me.customMenuItemsCache = [];

        component.headerCt.on('menucreate', function (cmp, menu) {
            menu.on('beforeshow', me.showHeaderMenu, me);
        }, me);
    },

    showHeaderMenu: function (menu) {
        var me = this;

        me.removeCustomMenuItems(menu);
        me.addCustomMenuitems(menu);
    },

    removeCustomMenuItems: function (menu) {
        var me = this,
            menuItem;

        while (menuItem = me.customMenuItemsCache.pop()) {
            menu.remove(menuItem.getItemId(), false);
        }
    },

    addCustomMenuitems: function (menu) {
        var me = this,
            renderedItems;

        var menuItems = menu.activeHeader.customMenu || [];

        if (menuItems.length > 0) {
            if (menu.activeHeader.renderedCustomMenuItems === undefined) {
                renderedItems = menu.add(menuItems);
                menu.activeHeader.renderedCustomMenuItems = renderedItems;
            } else {
                renderedItems = menu.activeHeader.renderedCustomMenuItems;
                menu.add(renderedItems);
            }
            Ext.each(renderedItems, function (renderedMenuItem) {
                me.customMenuItemsCache.push(renderedMenuItem);
            });
        }
    }
});

这是您使用它的方式（列配置中的customMenu允许您定义菜单）：

---

这个插件的工作方式也解决了其他实现遇到的一个问题。由于每个列只创建一次自定义菜单项（缓存已渲染的版本），因此不会忘记之前是否选中了自定义菜单项。

隐藏/显示列已在列子菜单中实现。您到底想要实现什么？先生，我正在尝试放置一个自定义按钮，如这个名为“添加新列”的按钮，它将打开一个窗口在数据库中添加新列……随意添加列可能过于复杂。你为什么不把它们全部加起来，并把其中一些标记为隐藏的呢？通过这种方式，用户只需使用标准界面选中/取消选中它们，我了解风险…我有大约13列，其中5列显示，其余已隐藏，公司所有者希望根据自己的意愿创建新列。这有点像excel在extjs网格上的操作…：）那你就完蛋了：）据我所知，没有标准的方法可以做到这一点。你需要深入了解ExtJs代码，找出他们在何处以及如何创建此菜单，并在其中添加自定义逻辑。是的，我确实看到了演示及其完美工作……但当我应用到我的网格时，我遇到了一个名为“Uncaught TypeError:无法调用undefined的'getMenu'方法”的错误…我需要包含插件还是什么…@NarayaN，在我的例子中

this==grid

。在您的情况下，

this==something

。您应该参考网格替换此。一种可能的方法是创建网格，将其分配给某个变量。然后使用该变量执行所有操作（如图所示）。关键是你必须能够访问网格的引用。是的，你是对的，先生。问题是我使用的是bryntum图表，左边是网格，右边是图表视图。我在整个应用程序中使用了侦听器，这是错误的。我会解决剩下的事情。但是非常感谢你。我很感激你宝贵的时间…真的…：）@george，是的。更新了我的答案（当您切换到其他版本的extjs时，您还必须包含相应的css）。如果订单列发生更改（通过拖放），则此附加菜单项不再存在。在这种情况下，将重新创建标题菜单。菜单项应为

Ext.define('MyGrid', {
    extend: 'Ext.grid.Panel',
    plugins: ['Ext.grid.CustomGridColumnMenu'],
    columns: [
        {
            dataIndex: 'name',
            customMenu: [
                {
                    text: 'My menu item',
                    menu: [
                        {
                            text: 'My submenu item'
                        }
                    ]
                }
            ]
        }
    ]
});