如何获取actioncolumn图标组件？

Posted 2023-02-26

【中文标题】如何获取actioncolumn图标组件？

【英文标题】：How to get actioncolumn icon component?

【发布时间】：2016-04-28 00:11:07

【问题描述】：

我搜索了两天，但找不到如何访问 rowselect 上的 actioncolumn 组件（不是 html）。我需要使用Saki's component communication technique (source) 设置图标点击事件。 我的专栏是这样的：

我找到了一种在更改行选择时显示/隐藏按钮的方法（此代码在 GridPanel 中使用）：

sm: new Ext.grid.RowSelectionModel(
        singleSelect: true,
        listeners: 
            beforerowselect: function(grid, rowIndex, record) 

                // 7 is the last cell index
                var cell = grid.grid.getView().getCell( rowIndex, 7 );
                //select icons in cell
                var icons = Ext.DomQuery.select('.x-action-col-icon', cell);

                //for each DOM element
                Ext.each(icons, function(icon, index) 
                    currentIcon = Ext.get(icon);

                    //if not 1st button
                    if (index !== 0) 
                        //Delete class that hides. Class 'x-hidden' also works
                        currentIcon.removeClass('x-hide-display'); //show icon
                    
                );
            ,
            rowdeselect: function(grid, rowIndex, record) 

                // 7 is the last cell index
                var cell = grid.grid.getView().getCell( rowIndex, 7 );
                //select icons in cell
                var icons = Ext.DomQuery.select('.x-action-col-icon', cell);

                //for each DOM element
                Ext.each(icons, function(icon, index) 
                    currentIcon = Ext.get(icon);

                    //if not 1st button
                    if (index !== 0) 
                        //Delete class that hides. Class 'x-hidden' also works
                        currentIcon.addClass('x-hide-display'); //show icon
                    
                );
            
        
    );

好的。下一个。我想在点击时显示另一个窗口（设置点击事件）。但我不知道如何从Window/Viewport获取访问权限：

//get items
this.loanGrid = this.items.itemAt(0);
this.documentsGridWindow = this.items.itemAt(2);

//add events
this.loanGrid.on (
    scope: this,
    afterrender: function() 

        selModel = this.loanGrid.getSelectionModel();

        selModel.on(
            scope: this,
            rowselect: function (grid, rowIndex, keepExisting, record) 
                //HOW TO GET actioncolumn 2nd button here???

        
    );


);

我还尝试将id 设置为beforerowselect 上的此图标，但在rowselect 上，此代码Ext.getCmp('icon-id') 返回undefined。 up() 和 down() 函数对我也没有帮助 =(

请帮忙！ =)

附言很遗憾，但 Ext.ComponentQuery 仅适用于 ExtJS 4。

【问题讨论】：

我不确定您为什么使用 rowselect 而不是 cellclick 或关于点击的事件？我可以提议使用 cellclick：docs.sencha.com/extjs/3.4.0/#!/api/…

@MichaelLane 只是因为 cellclick 不听键盘事件（向上和向下键），但 rowselect 可以。

【参考方案1】：

所以最后我重新编写了我的应用程序的某些部分。

首先我们需要给actioncolumn添加一些选项：

dataIndex: 'action',
id: 'action',

网格行按钮的显示/隐藏现在独立于actioncolumn 移动：

 /**
 * buildSelectionModel
 */
buildSelectionModel: function() 
    var sm = new Ext.grid.RowSelectionModel(
        singleSelect: true,
        listeners: 
            scope: this,
            rowselect: function(grid, rowIndex, record) 
                this.toggleFirstButtonShowState(grid.grid, rowIndex);
            ,
            rowdeselect: function(grid, rowIndex, record) 
                this.toggleFirstButtonShowState(grid.grid, rowIndex);
            
        
    );
    return sm;
,

/**
 * toggleFirstButtonShowState
 */
toggleFirstButtonShowState: function(grid, rowIndex) 

    //'action' is data index of
    var colIndex = this.getColumnIndexByDataIndex(grid, 'action');
    console.log(colIndex);

    // 7 is the last cell index
    var cell = grid.getView().getCell( rowIndex, colIndex);
    //select icons in cell
    var icons = Ext.DomQuery.select('.x-action-col-icon', cell);

    //for each DOM element
    Ext.each(icons, function(icon, index) 
        currentIcon = Ext.get(icon);

        //if not 1st button
        if (index !== 0) 
            //Show/delete class that hides. Class 'x-hidden' also works
            currentIcon.toggleClass('x-hide-display'); //show/hide icon
        

    );
,

getColumnIndexByDataIndex: function(grid, dataIndex) 
    //columns
    gridColumns = grid.getColumnModel().columns;

    for (var i = 0; i < gridColumns.length; i++) 
       if (gridColumns[i].dataIndex == dataIndex) 
            return i;
       
    

Viewport 部分：

//get selection model
selModel = this.loanGrid.getSelectionModel();

selModel.on(
    scope: this,
    rowselect: function (grid, rowIndex, keepExisting, record) 

        //get second icon in actioncolumn
        var icon = grid.grid.getColumnModel().getColumnById('action').items[1];

        //save context
        var self = this;

        //add handler by direct set
        icon.handler = function(grid, rowIndex, colIndex) 
            //open documents window
            self.documentsGridWindow.show();
        ;
       
);

一切正常！