Grid panel: style CELL according to its value (not whole row)

[jweymarn]

Hi Gurus!

My goal: I want to have a grid panel with lots of rows and columns. The cells will contain numbers and I want each and every cell to format according to its value. There are plenty of examples like below out there but that's for the whole row.

viewConfig: {
   getRowClass: function(record, index) {
      var c = record.get('dataIndexA');      
      ...

Because there will be a lot of cells in my grid I would like to move the styling over to the data if possible. Now I load my data from a .json file which looks something like:

{
    data:[
                {
                    "topic": "Account balance",
                    "jan": 100,
                    "feb": -10,
                    ...

Can I specify a cls style for each value (as can be done for example with a treePanel)? Something like:

{
    data:[
                 {"topic": "Account balance"},
                 {"jan": 100, "cls": "trafficLightGreen"},
                 {"feb": -10, "cls": "trafficLightRed"},
                 {"march": 42, "cls": "trafficLightGreen"},
                 ...

With the above the grid will render empty. :-(

[tobiu]

http://docs.sencha.com/ext-js/4-0/#!...n-cfg-renderer

gives you all you need. like:

metaData.style += 'color:red;';

[jweymarn]

Thanks!
Working now with the below code:

function trafficLightRenderer(value, metaData){
    //alert('Value passed is: '+value);
    if (value <= 0){
        metaData.tdCls += 'trafficLightRed';
    } else {
        metaData.tdCls += 'trafficLightGreen';
    }
    return value;
}
...
...
...
table1 = Ext.create('Ext.grid.Panel', {
        store: table1store,
        width: tableWidth,
        //minHeight: 400,
        title: 'Topic',
        cls: 'center table',
        border: 0,
        columns: [
            {
                text: 'Topic A',
                width: tableFirstColWidth,
                dataIndex: 'topicA',
                sortable: false,
                hideable: false
            },
            {
                text: 'Jan',
                width: tableColWidth,
                dataIndex: 'jan',
                sortable: false,
                renderer: trafficLightRenderer
            },
            {
                text: 'Feb',
                width: tableColWidth,
                //flex: 1,
                sortable: false,
                dataIndex: 'feb',
                renderer: trafficLightRenderer
            },

[jweymarn]

A new small but annoying question arose relating to this... If anyone else gets stuck on this...

In my CSS style trafficLightRed I, among other things, want to align the text in the middle. For some mysterious reason ExtJS adds a style (text-align: left) marking right inside the HTML <td> tag that then overrides any alignment i try to do:

<td class=" x-grid-cell x-grid-cell-gridcolumn-1036 trafficLightRed">
   <div class="x-grid-cell-inner x-unselectable" style="text-align: left;" unselectable="on">
      3
   </div>
...
...

To, inside the trafficLightRed style put the text-align: center as !important did not help.

The solution i found to this was to in my renderer add metaData.style += 'text-align: center !important' so that in the HTML source both left and center are present but center overrides due to the !important command...

metaData.tdCls += 'trafficLightRed';
metaData.style += 'text-align: center !important'

<td class=" x-grid-cell x-grid-cell-gridcolumn-1036  trafficLightRed">

   <div class="x-grid-cell-inner x-unselectable" style="text-align: center !important; text-align: left;" unselectable="on">
      3
   </div>

Not pretty but hey it works...

[tobiu]

well, i would not call it a mystery:

http://docs.sencha.com/ext-js/4-0/#!...lumn-cfg-align

[jweymarn]

Dammit! Somehow I had assumed that the API page for grid.panel contained everything i needed for that particular component... I was wondering how Google knew so much more about grids than the API... my bad!

Thank you for not calling me styypid... I know is must have crossed your mind... :-)

[tobiu]

nah, the grid has a lot of subclasses and it takes time to get familiar with them.

you should mark this topic as "answered", so other users can use it if they stuck on the same issue.

[jweymarn]

nah, the grid has a lot of subclasses...

Exactly, but only 3 are listed in the API page for grid panel...