请教 Ext3.3中grid的问题

得到的数据是这样的数组： 
[["a1","b1","c1"],
["a2","b2","c2"],
..........]我想让表格中这样显示：
a1 |  b1  |  c1  |  a1+b1  |  a1+c1  |
a2 |  b2  |  c2  |  a2+b2  |  a2+c2  |
并且当a>b时，该行显示为红色，a<b时显示为绿色。同时这个表格中的数据是动态的，颜色可能每隔一段时间就要改变一次。现在最重要的两点解决不了( -___- )b..
1 是如何让显示的数据和store中的不一样？比如后面的 a+b
2 是如何动态地改变整行的颜色呢？

解决方案 »

  1.   

    昨天折腾了一下午，找出个非常笨的方法：
    先让"a+b","a+c"的位置为空，然后在store.on('load',function(){})中遍历所有数组，通过store.getAt(行号).get('a")来获取值，最后set回去Q_Q 但是这样好慢啊...
      

  2.   

    参考：http://topic.csdn.net/u/20100819/15/dd47212b-96ef-40b8-8676-3c46a05e78b3.html
      

  3.   

    改变颜色后记得重新渲染窗体哦，用render方法
      

  4.   


     你可以在后台格式化成json的时候 自动加上a+b：value，a+c： value2
    这样不就好了吗。
    字体颜色 可能在要改变的那个字段{render：function(value){
        if(value<0){
              return '<font color=red>'+value+'</font>'
         }
         return value;
    }}
      

  5.   

    1. column配置时候，后面2个列加上renderer, 参考  api->column->renderer 或者example
    2. 覆盖gridView的getRowClass方法，参考 api->gridview->getRowClass
      

  6.   


    我根据5楼aj的思想写出如下代码,在ff,ie,chrome上测试通过了<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" >
    <head>
    <title></title>
    <!--ext start-  下面三个文件的路径换成你自己的路径  -->
    <link rel="stylesheet" type="text/css" href="/ext/resources/css/ext-all.css" />
    <script type="text/javascript" src="/ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="/ext/ext-all.js"></script>
    <!--ext end-->
    <script type="text/javascript">
    Ext.onReady(function(){
        var myData = [
            ['2','3','4'],
            ['5','6','7'],
            ['5','3','6']
        ];    var store = new Ext.data.ArrayStore({
            fields: [
               {name: 'a', type:'int'},
               {name: 'b',      type: 'int'},
               {name: 'c',     type: 'int'}
            ]
        });    store.loadData(myData);
        
        // change color
        function changeColor(val){
            var flag=(arguments[2].get('a')-0)-(arguments[2].get('b')-0);
            if(flag>0){
                return "<span style='color:red'>"+val+"</span>";
            }
            else if(flag<0){
                return "<span style='color:green'>"+val+"</span>";
            }
            else
                return val;
        }    // create the Grid
        var grid = new Ext.grid.GridPanel({
            store: store,
            columns: [
                {
                    header:'A',
                    dataIndex:'a',
                    renderer:changeColor
                },
                {
                    header:'B',
                    dataIndex:'b',
                    renderer:changeColor
                },
                {
                    header:'C',
                    dataIndex:'b',
                    renderer:changeColor
                },
                {
                    header:'A+B',
                    renderer:function(){
                        var val=(arguments[2].get('a')-0)+(arguments[2].get('b')-0);
                        var flag=(arguments[2].get('a')-0)-(arguments[2].get('b')-0);
                        if(flag>0){
                            return "<span style='color:red'>"+val+"</span>";
                        }
                        else if(flag<0){
                            return "<span style='color:green'>"+val+"</span>";
                        }
                        else return val;
                    }
                },
                {
                    header:'A+C',
                    renderer:function(){
                        var val=(arguments[2].get('a')-0)+(arguments[2].get('c')-0);
                        var flag=(arguments[2].get('a')-0)-(arguments[2].get('b')-0);
                        if(flag>0){
                            return "<span style='color:red'>"+val+"</span>";
                        }
                        else if(flag<0){
                            return "<span style='color:green'>"+val+"</span>";
                        }
                        else return val;
                    }
                }
            ],
            stripeRows: true,
            height: 350,
            width: 600,
            title: 'TEST Grid'
        });    // render the grid to the specified div in the page
        grid.render(Ext.getBody());
    });
    </script></head>
    <body>
    </body>
    </html>