PDA

View Full Version : Change background-color of the grid column



boston-george
23 Mar 2011, 3:07 AM
Hi guys,

how can i change background-color of the grid column dynamically?
for example after that events AfterEdit is fire?

thanks!

fay
23 Mar 2011, 4:41 AM
Create a renderer function for your column, but don't specify it in the initial column config; in the grid's afteredit listener, you can change the column's renderer with setRenderer.

Something like:



function renderBackgroundRed(value, metadata, record, rowIndex, colIndex, store)
{
metadata.attr = 'style="background-color: red;"';
return value;
}

// ...

'afteredit': function(e)
{
e.grid.getColumnModel().setRenderer(e.column, renderBackgroundRed);
e.grid.getView().refresh();
}

boston-george
24 Mar 2011, 7:34 AM
hi,

i post yocode because there are differences



var cm = Ext.getCmp('grlTrkLot').getColumnModel();
cm.setRenderer(5,renderBackgroundRed);




function renderBackgroundRed(value, metadata, record, rowIndex, colIndex, store)
{
metadata.attr = 'style="background-color: red;"';
return value;
}


there aren't error in firebug, but nothing happens

thanks

fay
24 Mar 2011, 7:56 AM
did you refresh?



e.grid.getView().refresh();

boston-george
24 Mar 2011, 8:04 AM
with refresh i see that only selcted cell change background!

but i need to change background at every cell of specific column after the grid was created
(there are control structures where I choose whether to change background, before the grid is displayed)

thanks!

fay
24 Mar 2011, 8:27 AM
I tried my snippet in the \examples\grid\edit-grid.js example and it works fine. The background of every cell of a column is changed... so there's something else amiss with your code.

boston-george
24 Mar 2011, 8:43 AM
Thanks! now it work!!
i write something wrong!

there is a strange thing for me, when i refresh, a datecolum where there is m-d-Y value, show string format date with complete timestamp!

netemp
16 Sep 2011, 4:04 AM
function renderBackgroundRed(value, metadata, record, rowIndex, colIndex, store)
{
metadata.attr = 'style="background-color: red;"';
return value;
}




Thanks for sharing this solution but its not working for me unfortunately. I just need to show columns in different background colors and for each I am creating a renderer function and setting up the metadata.attr as suggested by you, but no luck. Following is the code I am using for a column:



renderer : function(value, metadata, record, rowIndex, colIndex, store){
metadata.attr = 'style="background-color: red;"';
return value;
}

I am using ExtJS 4. Does this have something to do with the version?

Would be grateful if you could guide at this.

Thanks in advance.

Uberdude
16 Sep 2011, 6:23 AM
Yes, Ext4 is different. From the (now rather sexy) documentation:

metaData : Object
(http://docs.sencha.com/ext-js/4-0/#!/api/Object)A collection of metadata about the current cell; can be used or modified by the renderer. Recognized properties are: tdCls, tdAttr, and style.

i.e. attr is now called tdAttr.