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

Question

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

任何帮助将不胜感激......谢谢...... :)

Answer 1

几个月前，我遇到了同样的问题。我已经设法通过扩展Ext.grid.header.Container来解决它（我已经覆盖了 getMenuItems方法）。但是，最近，我发现了另一种需要较少编码的解决方案：只需在创建网格小部件后手动添加菜单项。

我将在这里发布第二个解决方案：

Ext.create('Ext.grid.Panel', {
    // ...
    listeners: {
        afterrender: function() {
            var menu = this.headerCt.getMenu();
            menu.add([{
                text: 'Custom Item',
                handler: function() {
                    var columnDataIndex = menu.activeHeader.dataIndex;
                    alert('custom item for column "'+columnDataIndex+'" was pressed');
                }
            }]);           
        }
    }
});

这是演示。​</p>

更新

这是ExtJs4.1 的演示。

Answer 2

从我所看到的情况来看，您应该避免 afterrender 事件。

语境：

我正在构建的应用程序使用具有动态模型的商店。我希望我的网格有一个从服务器获取的可定制模型（所以我可以为我的可定制网格拥有可定制的列）。

由于无法修改标题（因为商店被重新加载并破坏了我修改的现有菜单 - 使用上面的示例）。可以这样执行具有相同效果的替代解决方案：

Ext.create('Ext.grid.Panel', {
    // ...

    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) {
            this.createHeaderMenu(menu);
        }, this);
    },

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

        menu.add([
            // { custom item here }
            // { custom item here }
            // { custom item here }
            // { custom item here }
        ]);
    }
});

Answer 3

对于那些不想只有一个“标准”列菜单但像我这样有一个单独的列菜单的人，可以使用以下

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

Answer 4

我接受了@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 可让您定义菜单）：

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

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