CODEWITHSUNDEEP
javascriptextjs
Amir Mog
Amir Mog

Reputation: 321

How to programmatically change css of gridpanel's cell

I have two distinct gridpanels and throughout my code, whenever value of one of the cells in Grid1 changes I want to be able to change value of certain cells in the Grid2, How can I change the css of the second grid from within the Grid1.

The following allows me to change the css for an entire row in Grid2 but I need to be able to change the css for a cell of Grid2 row: 2, column 3

var Grid2Store= Ext.data.StoreManager.get("MainComparisonStore");
Grid2.getView().addRowCls(Grid2Store.getAt(2), 'orange-bar');

Upvotes: 1

Views: 1262

Answers (1)

Justin
Justin

Reputation: 1310

Get a hold of the element and you can use cellElement.addCls('orange-bar');. See Ext.dom.Element.addCls() documentation. I put together a jsFiddle for you to see an example. Just click the "Test" button in the grid toolbar.

Here is the code that does the work. It is hard coded to add a class to column 1, row 1.

var grid = Ext.getCmp('myGrid');
var column = grid.columns[1];
var record = grid.store.getAt(1);
var cell = grid.getView().getCell(record, column);
cell.addCls('orange-bar');

Here (Sencha Forum) is some discussion on how to get the cell. This is what I used to put together my example. You can see how you could make a helper like getCell(rowIndex, columnIndex) pretty easily.

Upvotes: 1

Related Questions