Search code examples
extjstreegrid

How to format ExtJS treegrid cell based on value in another cell


I am trying to format one ExtJS treegrid cell based on the value in another cell in the same row. Below is an overview of how I currently have it coded. However, this is not currently working so I would appreciate any suggestions.Thanks!

function fn(v, values){
    if (values.alarm == 1) {
        return '<span style="color: red;">' + v + '</span>';
    }
    return v;
}

//new treegrid

columns:[{
    header: 'H1',
    width: 60,
    dataIndex: 'duration1',
    align: 'center',
    tpl: new Ext.XTemplate(
        '{duration1:this.doFormat}',
        {doFormat: fn()}
    )
}, {
    header: 'A1',
    width: 60,
    dataIndex: 'alarm1',
    align: 'center'
}]

Solution

  • Below is the solution I developed to get what I needed in case anyone else has the same issue.

    //Treegrid formatting function
    function fn(v, values){
        i = i + 1;
        switch(i){
            case 1: x = values.alarm1; break;
            case 2: x = values.alarm2; break;
            default: alert("x not assigned value");
        }
        if (x == 1) {return '<span style="background-color: red; width: 100%">' + v + '</span>';}
        else if(i == currenthour)
            {return '<span style="background-color:' + currentcolor + '; width: 100%">' + v + '</span>';}
        else
            {return '<span style="background-color:' + basecolor + '; width: 100%">' + v + '</span>';}  
    }
    
    //create the treegrid
    columns:[
            {header: 'Name',dataIndex: 'name',width: 210},
            {header: 'H1', width: 60, dataIndex: 'duration1', align: 'center',              
                tpl: new Ext.XTemplate('{duration1:this.doFormat}', {doFormat: fn})},
                {header: 'A1', width: 0,dataIndex: 'alarm1' , visibility: false},
            {header: 'H2', width: 60, dataIndex: 'duration2',align: 'center',
                tpl: new Ext.XTemplate('{duration2:this.doFormat}', {doFormat: fn})},
                {header: 'A2', width: 0,dataIndex: 'alarm2' , visibility: false},
    ]