actioncolumnアイコンコンポーネントを取得する方法は？

Question

私は2日を探していて、行選択にactioncolumnコンポーネント（htmlではない）へのアクセス方法を見つけることができません。 Saki's component communication technique（source）を使用してアイコンをクリックしてイベントを設定する必要があります。 私の列は次のようになります。

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

OK：

私は、変更行の選択に/非表示ボタンを表示する方法方法を（このコードはGridPanelに使用しています）を発見しました。次。私はクリック時に別のウィンドウを表示したい（クリックイベントを設定する）。しかし、私は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??? 

     } 
    }); 

} 
}); 

私もbeforerowselectにこのアイコンにidを設定しようとしましたが、rowselectこのコードExt.getCmp('icon-id')戻りundefinedに。 up()とdown()機能ではない、あまりにも私を助け=（

助けてください！=）

P.S.悲しいですが、Ext.ComponentQueryはExtJS 4からのみ動作します。

Answer 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(); 
     }; 
    } 
}); 

すべて期待通りに動作します！