Выделите строку и ячейку при выборе элемента сетки

Question

Существует ли стандартный способ выделения активной строки в сетке, как на прикрепленном экране?

Я имею в виду наличие сетки с типом выбора cellmodel при нажатии на элемент всетка, она выделяет ячейку.Я хотел бы выделить активную строку в то же время.

Это очень полезно, когда gird содержит много данных для анализа, при выборе ячейки, и необходимо выделить всю строку (возможно, столбец?).

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