ExtJS 4 Grid Column value dependent on another Column value in same row

• Tweet

• Tweet

Hi Guys,

May be I don’t know how to write article titles but let me explain what I am trying to say here.

This Example code use version 4 of 

Say you have a Grid and one of your Column value is Dependent on another Column value. i.e.

Pseduo code

Col A = {
           if(ColB.value =='yes') 
             then value is "Green" 
           else 
             value is "Red"
        }

Alright that doesn’t make sense, lets take an Example here and then we will use Column Renderer to manipulate a value

Say you have a Model as shown below

Ext.define('Summaries', {
    extend: 'Ext.data.Model',
    fields: ['ResultKey', 'Status']
});

And you have a Store that make use of above model

var Summaries = Ext.create('Ext.data.Store', {
            autoLoad: true,
            autoSync: true,
            model: 'Summaries',
            proxy: {
                type: 'rest',
                url: '/Summaries/?format=json',
                reader: {
                    type: 'json',
                    root: 'Summaries'
                }
            }
        });

In above model I have properties ResultKey and Status, 

Lets assume I have two Statuses returned A and B but I want to another one called C which by default is not returned by the Server but is finalized at the client side based on the value of ResultKey

So say if my ResultKey value is 3 then Status will be shown as C

I hope that you are still with me. If not then re-read the above lines.

Alright lets write some code for our Grid.

var grid = Ext.create('Ext.grid.Panel', {
            renderTo: Ext.getBody(),
            width: 1000,
            height: 600,
            store: Summaries,
            iconCls: 'icon-user',
            columns: [{
                text: 'Result key',
                width: 50,
                sortable: true,
                dataIndex: 'ResultKey'
            }, {
                header: 'Status',
                width: 100,
                sortable: true,
                // renderer: function(){},
                dataIndex: 'Status'
            }
        });

So above will create a Grid. Notice the commented code

// renderer: function(){},

We will be using that to render our Status

For column renderer reference please visit

http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.column.Column-cfg-renderer

renderer function takes the following params

• value : Object

  The data value for the current cell, this could be string, number etc

• metaData : Object

  Cell Metadata

• record : Ext.data.Model

  Current row

• rowIndex : Number

  Current row index

• colIndex : Number

  Current Column index

• store : Ext.data.Store

  The data store

• view : Ext.view.View

  The current view

Lets change our column renderer function to something like this

renderer: function(value,metaData,record){
               if(record.ResultKey == 3){
                    return 'C';
               }
               else {

                    return value;  
               } 
          },

So the full Grid Code will be

var grid = Ext.create('Ext.grid.Panel', {
            renderTo: Ext.getBody(),
            width: 1000,
            height: 600,
            store: Summaries,
            columns: [{
                text: 'Result key',
                width: 50,
                sortable: true,
                dataIndex: 'ResultKey'
            }, {
                header: 'Status',
                width: 100,
                sortable: true,
                renderer: function(value,metaData,record){
                    if(record.ResultKey == 3){
                       return 'C';
                     }
                     else {
                          return value;
                      } 
                },
                dataIndex: 'Status'
            }
        });

If you see any bugs above that's Ok because I did much of the typing in the Post itself rather than copy pasting it Bottom line is that you get the Idea on how to access cross column properties in Column Renderers

I hope this helps

Cheers,

Advertisement