PDA

View Full Version : Grid: Control the view of single cells after rendering



nschuil
1 Mar 2011, 12:36 AM
Hi All,

For the last couple of days I'm working on a ExtJS Gridpanel. I'd like to control the view (Font, Background Color, Borders) of all single cell's in my grid. For example, from server side i send via Ajax: Give cell 2,3 a red background color.

For me it seems to be hard to find a way to control all single cells after the grid has been rendered. Does anyone know a good way to do this?

What i've come up with so far:


var grid = Ext.getCmp(field);
var store = grid.getStore();
var record = store.getAt(srow);

var view = grid.getView();
var therow = view.getRow(0);
record.set('d'+scol, stext); // To set data. All colums are named d1,d2, etc.

var c = view.getCell(2, 3);
Ext.fly(c).addClass("RedBackgroundClass");


If I apply the class to the row it works as expected, but not for the cell. Is there another way to do this?

Thanks!

fay
1 Mar 2011, 1:03 AM
Use GridView's getRowClass (http://dev.sencha.com/deploy/dev/docs/?class=Ext.grid.GridView&member=getRowClass) if you want to style individual rows; otherwise, I'd use a Column renderer (http://dev.sencha.com/deploy/dev/docs/?class=Ext.grid.Column&member=renderer) where you have access to the metadata parameter's css and attr properties to style individual cells. See: ColumnModel setRenderer (http://dev.sencha.com/deploy/dev/docs/?class=Ext.grid.ColumnModel&member=setRenderer) for a full description. (There are examples of renderers in the \examples\grid folder.)

nschuil
1 Mar 2011, 2:00 AM
Thanks. But i'd like to do it dynamically, once the grid has been rendered.

For example, once I click a button I'd want to change the background color of cell 2,3 and 2,4.

fay
1 Mar 2011, 2:27 AM
Use the renderers, and when the store's data (attached to the grid) - and which i'm assuming contains the color/style/etc. - is updated from the server, the grid will automatically be refreshed (i.e., call the renderers). Give it a quick test and you'll see what i mean.

nschuil
1 Mar 2011, 6:33 AM
Cool, thanks. That was the way to do it.