GridPanel showing cell differences in records

[superDuke]

Hi all,

I'm not sure if this has been discussed, but I have a unique request. I want to hi-light each cell that changed in a grid panel. For example, I'm given an array of transaction history (sort by timestamp DESC), and would like to show changes between adjacent cells..

|timestamp|col1|col2|col3|
 7/7/2007    2    2    2
 7/5/2007    4    3    2
 7/2/2007    4    5    2 

For this grid, the cells that should be hi-lighted would be

[0,1] since value went 4->2
[0,2] since value went 3->2
and [1,2] since value went 5->3

I thought about doing this in the cell renderer, but i can't seem to get the data store instance. Is there a better way to implement this?

[srajakaruna]

Create a renderer for col3

function _renderCell(data, cell, record, rowIndex, columnIndex, store){
	var _v1 = record.get('col1'); // value of col1
        var _v2 = record.get('col2'); // value of col1
	if (_v2>_v1){
           cell.css ="css1";
        }else{
           cell.css ="css2";
        }
	return;
}

You can have 2 css classes seperately to hilight .. I hope this is what you want ... I've done this and works fine

You can change the function as you need

[superDuke]

Create a renderer for col3

function _renderCell(data, cell, record, rowIndex, columnIndex, store){
var _v1 = record.get('col1'); // value of col1
var _v2 = record.get('col2'); // value of col1
if (_v2>_v1){
cell.css ="css1";
}else{
cell.css ="css2";
}
return;
}

srajakaruna, thank you very much for the prompt reply, but I'm not sure I follow. _v1 and _v2 are values in the same record/row, right? I want to show differences in adjacent rows, ie if cell [0,0] is different from cell [1,0]. The value of store returns [] and record.store shows [] too... is this normal?

[srajakaruna]

var _yourStore = Ext.getCmp('yourGrid').getStore();
var _yourRange = _yourStore.getRange();


var _preC1=0;
var _preC2=0;

for (x=0, x<_yourRange.length; x++){
   var _cl1= _yourRange[x].get('col1');
   var _cl2= _yourRange[x].get('col2');

    if (preC1>cl1){
       /// do something
   }

    if (preC2>cl2){
       /// do something
   }

   _preC1=_cl1;
   _preC2=_cl2;  
}

this will loop through the store .. and you can compare row values. Try and see ..

[superDuke]

Thanks sir... this is what I was looking for...for some reason ds shows up as [] when you log it, but it is not null. If 'price' went down, it shows in green, if it went up it shows in red.

   var cellRender = function(v,p,r,ri,ci,ds) {
         console.log(v,p,r,ri,ci,ds);
         var _yourRange = ds.getRange(ri, ri+1);
         var _cl1, _cl2;
         console.log(_yourRange)

         if (_yourRange.length > 1){
           _cl1= _yourRange[0].get('price');
           _cl2= _yourRange[1].get('price');
         }

         if (_cl2>_cl1){
            return String.format('<font style="color:green">{0}</font>', v);
          }

         else if (_cl1>_cl2){
             return String.format('<font style="color:red">{0}</font>', v);
         }
         else
         return v;
   } 

[img=http://img183.imageshack.us/img183/5297/griddiffwd2.th.gif]