EXTJS4: Compare two fields in GridPanel with each other

Question

I have a Grid-Panel with a few columns. Now I want to set a new Class in a Column of a Row, when the values don't match with each other. But how can i get success to a column in a different row? Her is my code which I tried, but it says, the ID is undefined:

...{
    header: 'CRS',  
    dataIndex: 'crs',
    id:'crs',
    flex:1,
    renderer: function(value, meta) {

        console.log("csv-->"+Ext.getCmp('csv').value);

        if(value==Ext.getCmp('csv').value)
            {
                //change class
            }

    }
},
{
    header: 'CSV', 
    dataIndex: 'csv',
    id:'csv',
    flex:1
},...

score 2 · Answer 1 · answered Sep 05 '13 at 11:27

The code you've posted does not seem to match what you're asking for. According to your code, it appears that you're trying to compare values across columns in the same row, not a different row. So which is it?

Anyway, assuming that your code is indicative of what you want, be sure to look at the docs for the the renderer: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.column.Column-cfg-renderer

One of the arguments passed to the renderer method is the "record", which will contain all the values for the record which is filling the values for the entire row. If you wanted to compare values across columns, you could do something like:

if( value==record.get( 'csv ') ) { 
    ...do something here... 
}

If you really need to compare values across rows, then the "store" also gets passed as one of the arguments to renderer, so you could compare values against specific row values that way.

Alternatively, you could do most of this in Model itself. If you are just comparing columns in the same row, you could create an additional field in your Model that stores the result of the comparison. If you did that, all that your renderer would need to do is switch on the value of that new field, rather than doing the entire comparison AND rendering.

You are right, sorry, I want to compare values in the same row! See my new entry! Thanks for your help! — Zwen2012, Sep 05 '13 at 12:35

Zwen2012 · Accepted Answer · 2013-09-05T12:50:05.903

1

I have it! This works for me:

{
    header: 'CSV', 
    dataIndex: 'csv',
    flex:1,
    renderer: function(grid, rowIndex, rowdata) {
        var csv_data=rowdata.data.csv;
        var crs_data=rowdata.data.crs;
        if (csv_data != crs_data) { 
           rowIndex.tdCls = "red-class";
        } 
            return csv_data;

    }
},

edited Sep 05 '13 at 12:50

answered Sep 05 '13 at 12:37

Zwen2012

3,360
9
40
67

2

Glad it's working, but i would suggest two additional things: 1.) pass all the arguments in your renderer...you never know when you'll need them, and it's good for other devs looking at your code to know everything that's available. 2.) Use the API method--record.get( fieldName )--for getting the data from the record (and the argument *should* be "record" not "rowdata" since the object passed is the full Ext.data.Model instance). Good luck. – existdissolve Sep 05 '13 at 14:09

score 0 · Answer 3 · answered May 20 '14 at 17:02

{
    header: 'CSV', 
    dataIndex: 'csv',
    flex:1,
    renderer: function(value, meta, record) {
        var crs = record.get('crs');
        if (value && crs)
        {
            if (value != crs) { 
               meta.tdCls = "red-class";
            }
        }
        return value;
    }
},

Rewritten for ExtJS 4, you can use the value as you set it in the dataIndex, and because that's a record the recommended extjs 4 way to get the value would be the get method.

Just a heads up there are a ton more properties on renderer, you can find the full list here: http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.grid.column.Column-cfg-renderer

EXTJS4: Compare two fields in GridPanel with each other

3 Answers3