突出显示网格项目选择上的行和单元格

Question

是否有标准的方法来突出显示网格中的活动行，如附加屏幕？

我的意思是拥有一个cellmodel选择类型的网格，当点击网格中的某个项目时，它会突出显示该单元格。我想同时突出显示活动行。

当gird包含大量要分析的数据时非常有用， 选择单元格时，需要突出显示整行（可能是collumn？）。

Answer 1

感谢您的帮助。我们做到了:)这是一个可能的解决方案：

selModel: Ext.create('Ext.selection.CellModel', {
    listeners: {
        select: function (cellModel, record, rowIndex) {
            var myGrid = this.items.get('gridItemId');
            myGrid.getView().addRowCls(rowIndex, 'row-style');
        },
        deselect: function (cellModel, record, rowIndex) {
            var myGrid = this.items.get('gridItemId');
            myGrid.getView().removeRowCls(rowIndex, 'row-style');
        },
        scope: this
    }
}),

Answer 2

你可以使用网格的addRowCls方法，它将CSS类添加到特定的行。

http://docs.sencha.com/ext-js/4-0/#/api/Ext.grid.View-method-addRowCls

Answer 3

即使您正在使用CellSelectionModel，您也可以轻松地将样式/类应用于所选单元格所在的行。如果您查看CellSelectionModel的事件，您将看到cellselect实际上返回rowIndex。

  

cellselect :( SelectionModel this ，Number rowIndex ，Number colIndex）

所以，你可以这样做，如下所示：

// we'll say you have your Grid stored in a variable, grid
CellSelectionModel ...({
    listeners: {
        'cellselect': function(selModel, rowIndex) {
            var cellRow = grid.getView().getRow(rowIndex);
            Ext.fly(cellRow).addClass('selectedRow')
            // do any other logic with the actual DOM element here
    }
})