如何獲取actioncolumn圖標組件？

我正在搜索兩天，無法找到如何在rowselect上訪問actioncolumn組件（NOT html）。我需要使用Saki's component communication technique（source）設置圖標點擊事件。我的專欄的樣子：如何獲取actioncolumn圖標組件？

我找到了一種方法如何顯示上改變行選擇/隱藏按鈕（此代碼使用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起作用。

來源

2016-04-28 Sogl

我不確定要了解爲什麼要使用rowselect而不是cellclick或有關點擊的事件？我可以建議使用cellclick：http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.grid.GridPanel-event-cellclick –

@MichaelLane因爲'cellclick'不聽鍵盤事件（向上和向下鍵），但'rowselect'。 – Sogl

因此最後我重寫了我的應用程序的某些部分。

首先，我們需要一些選項添加到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(); 
     }; 
    } 
});

所有按預期工作！

來源

2016-05-05 01:50:55 Sogl

如何獲取actioncolumn圖標組件？

回答

相關問題