Extjs 网格列标题，将下拉菜单项添加到特定列

Posted 2023-02-22

【中文标题】Extjs 网格列标题，将下拉菜单项添加到特定列

【英文标题】：Extjs grid column header, add dropdown menu item to specific columns

【发布时间】：2014-03-05 15:26:11

【问题描述】：

我正在尝试在我的网格中的列标题下拉菜单中添加一个按钮。但是，我只想将它添加到具有特定 itemId 的列中。到目前为止，我已经将按钮添加到所有列，请参见下面的代码。我看不到在哪里可以检查每列的 itemId，但它似乎没有遍历列。有什么解决方法吗？谢谢！

items:[
            region:'center',
            xtype:'grid',
            columns:
                    items: COLUMNS, //defined in index.php
            ,
            store:'Items',
            selType: 'checkboxmodel',
            listeners: 
                    afterrender: function()         
                            var menu = Ext.ComponentQuery.query('grid')[0].headerCt.getMenu();
                            menu.add([
                                    text: 'edit',
                                    handler: function() 
                                            console.log("clicked button");
                                    
                            ]);           
                    
            
    ],

【参考方案1】：

网格列菜单存在于一个实例中，为所有列共享。因此，您不能只为一列添加菜单项。

但是，您可以在此菜单中为特定列显示/隐藏菜单项。您可以使用菜单beforeshow 事件并从menu.activeHeader 属性获取有关列的信息：

listeners: 
    afterrender: function(c)                                         
        var menu = c.headerCt.getMenu();

        // add menu item  into the menu and store its reference
        var menuItem = menu.add(
            text: 'edit',
            handler: function() 
                console.log("clicked button");
            
        );

        // add listener for beforeshow menu event
        menu.on('beforeshow', function() 

           // get data index of column for which menu will be displayed
           var currentDataIndex = menu.activeHeader.dataIndex; 

            // show/hide menu item in the menu
            if (currentDataIndex === 'name') 
                menuItem.show();
             else 
                menuItem.hide();
            
        );
    

摆弄现场示例：https://fiddle.sencha.com/#fiddle/3fm

【讨论】：

如何在 extjs 3 中做到这一点。