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

时间:2014-02-08 01:56:27

标签: extjs grid javascript-framework extjs4.2 extjs-mvc

我正在尝试向网格中的列标题下拉菜单添加一个按钮。但是,我只想将它添加到具有某些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 个答案:

答案 0 :(得分:9)

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

但是,您可以在此菜单中显示/隐藏特定列的菜单项。您可以使用菜单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