在列标题下拉菜单中添加自定义按钮{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');
                }
            }]);           
        }
    }
});

这是演示.

UPDATE

这是ExtJs4.1的演示.

Answer 2

从我所看到的,你应该避免后来的事件.

语境:

我正在构建的应用程序使用具有动态模型的商店.我希望我的网格有一个可从服务器获取的可自定义模型(所以我可以为我的可自定义网格提供可自定义的列).

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

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