Wie bekomme ich Actioncolumn Icon Komponente?

Question

Ich suche zwei Tage und kann nicht finden, wie man Zugriff auf actioncolumn Komponente (nicht HTML) auf Rowselect bekommt. Ich muss Ereignis auf Icon klicken, das Saki's component communication technique (source) verwendet. Meine Spalte wie folgt aussieht:

ich einen Weg, wie man gefunden Zeilenauswahl zum Anzeigen/Verbergen Tasten ändern (dieser Code verwendet in 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. Nächster. Ich möchte ein weiteres Fenster auf Klick zeigen (Klick Ereignis setzen). Aber ich weiß nicht, wie der Zugang zu bekommen von 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??? 

     } 
    }); 

} 
}); 

Ich habe auch versucht id auf dieses Symbol zu setzen auf beforerowselect, aber auf rowselect diesen Code Ext.getCmp('icon-id') kehrt undefined. up() und down() Funktionen hilft mir, nicht zu = (

HELP bitte! =)

P. S. Traurig, aber Ext.ComponentQuery funktioniert nur von ExtJS 4.

Answer 1

So endlich habe ich einige Teile meiner Anwendung neu geschrieben.

Zunächst müssen wir einige Optionen actioncolumn hinzuzufügen:

/** 
* 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 Teil:

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

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

Grid Reihe Tasten/jetzt unabhängig von actioncolumn bewegen verstecken zeigen

Alles funktioniert wie erwartet!