1. #1
    Ext JS Premium Member
    Join Date
    Jun 2008
    Posts
    110
    Vote Rating
    0
    superDuke is on a distinguished road

      0  

    Default GridPanel showing cell differences in records

    GridPanel showing cell differences in records


    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..

    PHP Code:
    |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?

  2. #2
    Ext User srajakaruna's Avatar
    Join Date
    Apr 2008
    Location
    Sri Lanka
    Posts
    161
    Vote Rating
    0
    srajakaruna is on a distinguished road

      0  

    Default


    Create a renderer for col3

    Code:
    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

  3. #3
    Ext JS Premium Member
    Join Date
    Jun 2008
    Posts
    110
    Vote Rating
    0
    superDuke is on a distinguished road

      0  

    Default


    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?

  4. #4
    Ext User srajakaruna's Avatar
    Join Date
    Apr 2008
    Location
    Sri Lanka
    Posts
    161
    Vote Rating
    0
    srajakaruna is on a distinguished road

      0  

    Default


    Code:
    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 ..

  5. #5
    Ext JS Premium Member
    Join Date
    Jun 2008
    Posts
    110
    Vote Rating
    0
    superDuke is on a distinguished road

      0  

    Default I think I got it!

    I think I got it!


    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.

    PHP Code:
       var cellRender = function(v,p,r,ri,ci,ds) {
             
    console.log(v,p,r,ri,ci,ds);
             var 
    _yourRange ds.getRange(riri+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]

Thread Participants: 1

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar