Extjs网格列标题，将下拉菜单项添加到特定列 [英] Extjs grid column header, add dropdown menu item to specific columns

问题描述

我正在尝试将按钮添加到网格中的列标题下拉菜单中。但是，我只想将其添加到具有特定itemId的列中。到目前为止，我已经开始将按钮添加到所有列，请参阅下面的代码。我没有看到我可以检查每列的itemId，但它似乎并没有遍历列。有没有解决方法？

 项目：[{
 region：'center'，
 xtype：'grid' ，
列：{
 items：COLUMNS，//在index.php中定义
}，
 store：'Items'，
 selType：'checkboxmodel'，
听众：{
 afterrender：function（）{
 var menu = Ext.ComponentQuery.query（'grid'）[0] .headerCt.getMenu（）; 
 menu.add（[{
 text：'edit'，
 handler：function（）{
 console.log（clicked button）; 
} 
}]）; 
 
 
}]，
  

解决方案

网格列菜单存在于所有列共享的实例中。因此，您无法仅为一列添加菜单项。

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

 听众：{
 afterrender：function（c）{
 var menu = c.headerCt.getMenu（）; 
 
 //将菜单项添加到菜单中并存储它的引用
 var menuItem = menu.add（{
 text：'edit'，
 handler：function（ ）{
 console.log（clicked button）; 
} 
}）; 
 
 //在菜单事件之前添加监听器
 menu.on（'beforeshow'，function（）{
 
 //获取列的数据索引将显示
 var currentDataIndex = menu.activeHeader.dataIndex; 
 
 //在菜单中显示/隐藏菜单项
 if（currentDataIndex ==='name'）{
 menuItem.show（）; 
} else {
 menuItem.hide（）; 
} 
}）; 
 
 
 
 
 
 
 $ b 
提供现场实例：  https://fiddle.sencha.com/#fiddle/3fm   
 
I'm trying to add a button to the column header drop-down menus in my grid. However, I only want to add it to columns with certain itemId. So far I've got it working to add the button to all columns, see code below. I dont see where I could check each column's itemId though, it doesn't seem to iterate through the columns. Is there any workaround for this? Thank you!
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");
                                    }
                            }]);           
                    }
            }
    }],

解决方案
The grid column menu exists in one instance which is shared for all columns. Because of this you can not add menu item only for one column.

However you can show/hide menu item in this menu for specific column. You can use menu beforeshow event and get information about column from menu.activeHeader property:
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();
            }
        });
    }
}
Fiddle with live example: https://fiddle.sencha.com/#fiddle/3fm

                        
这篇关于Extjs网格列标题，将下拉菜单项添加到特定列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！