CODEWITHSUNDEEP
extjsextjs4
scebotari66
scebotari66

Reputation: 3480

Highlight both row and cell on grid item select

Is there a standard way to highlight active row in a grid like in attached screen?

I mean having a grid, with cellmodel selection type, when clicking on an item in the grid, it highlights the cell. I would like to highlight the active row at the same time.

It is very useful when gird contain a lots of data to be analysed, when selecting cell, and entire row (maybe collumn?) needs to be highlighted.

enter image description here

Upvotes: 2

Views: 9117

Answers (3)

scebotari66
scebotari66

Reputation: 3480

Thanks for your help guys. We did it :) Here is the one possible solution : 

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

Upvotes: 2

Gopal Saini
Gopal Saini

Reputation: 357

you can use addRowCls method of grid which Adds a CSS Class to a specific row.

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

Upvotes: 1

dmackerman
dmackerman

Reputation: 2966

Even if you are using the CellSelectionModel, you could easily apply styles/classes to the row the selected cell is in. If you take a look at the events for CellSelectionModel, you'll see the cellselect actually returns the rowIndex.

cellselect : ( SelectionModel this, Number rowIndex, Number colIndex )

So, what you could so is something like the following:

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

Upvotes: 0

Related Questions