如何以编程方式更改gridpanel的单元格的CSS

Question

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');

Answer 1

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.