Как получить компонент значка actioncolumn?

Question

Я ищу два дня и не могу найти способ получить доступ к компоненту actioncolumn (НЕ html) на rowselect. Мне нужно установить событие на значок, используя 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 
        } 
       }); 
      } 
     } 
    }); 

Ok. Следующий. Я хочу показать другое окно на клике (установить событие click). Но я не знаю, как получить доступ из 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() функции не помогает мне тоже = (

HELP пожалуйста! =)

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

Все работает как ожидалось!