行渲染和列渲染

一，单元格渲染
   单元格是最终显示的数据地方，它是根据列定义信息设置来显示的，主要通过renderer属性来渲染的，可以通过这个属性设置单元格的最终渲染效果。
 var cm = new Ext.grid.ColumnModel([
         { header: '编号', dataIndex: 'id' },
         { header: '姓名', dataIndex: 'name' },
         { header: '性别', dataIndex: 'sex',
           renderer: function(value) {    --通过列的渲染函数来定义
                 if (value == 'male') {
                     return "<span style='color:red; font-weight:bold;'>" + value + "</span>";
                 } else {
                    return "<span style='color:green; font-weight:bold;'>" + value + "</span>";
                 }
             }
         },
         { header: '描述', dataIndex: 'descn' },
         { header: '日期', dataIndex: 'date', type: 'date', renderer: Ext.util.Format.dateRenderer('Y年m月d日') }
    ]);
   你也可以把列渲染的函数定义在外面，然后指定给renderer函数。通过这里可以看到为单元格添加图片也就比较容易了，只需要指定相应的
图片标签就可以了，如：
  function renderSex(value){
    if(value == '男'){
        return "<span style='color:red; font-weight:bold;'>男</span><img src='user_male.png' />";
     } else {
        return "<span style='color:red; font-weight:bold;'>女</span><img src='user_male.png' />";
     }
 }
其实表格在渲染的时候提供了很多参数，通过它我们可以获取很多有用的信息，下面就是逐一介绍这些参数：
value:    将要显示到单元格的值
cellmeta：单元格的相关属性，主要有id 和 css
record：  单元格所在行的数据对象，如果要获取其他列的数据值，可以通过：record.data["id"] 的方式得到.
rowIndex: 行号
columnIndex: 列号
store：  构造表格时传递的ds。也就是说，表格所有的数据都可以通过store获得。
如：
function(value, cellmeta, record, rowIndex, columnIndex, store) {
                 var str = "<input type='button' value='查看详细信息' onclick='alert(\"" +
                         "这个单元格的值是:" + value + "\\n" +
                         "这个单元格的配置是:{cellId:" + cellmeta.cellId + ",id:" + cellmeta.id + ",css:" + cellmeta.css + "}\\n" +
                         "这个单元格对应的行的record是:" + record + ", 一行的数据都在里边\\n" +
                         "这是第" + rowIndex + "行\\n" +
                         "这是第" + columnIndex + "列\\n" +
                         "这个表格对应的Ext.data.Store在这里: " + store + ",随便用吧." +
                         "\")'>";
                 return str;   -- 注意一定要return这个值。
}
  上面的方法把单元格渲染成了一个按钮，通过单击按钮，弹出单元格的信息， 注意最后一定要return 。
 
二、 给表格的行和列设置颜色
1， 给行设置颜色
本例主要通过指定每一列的颜色的方式，给表格行设置颜色。
<style type="text/css">
      .white-row{ background-color: white; }
      .red-row{ background-color: #F5C0C0 !important; }
      .yellow-row{ background-color: #FBF8BF !important; }
      .green-row{ background-color: #99CC99 !important; }
</style>
 Ext.onReady(function() {
        var PersonRecord = Ext.data.Record.create([            --创建一行记录
                          { name: 'name', type: 'string' },
                          { name: 'sex', type: 'int' },
                          { name: 'color', type: 'string' }
                         ]);
        var data = [                                            --创建4行数据
                      ['boy', 0, '#FBF8BF'],
                      ['girl', 1, '#99CC99'],
                      ['man', 0, '#F5C0C0'],
                      ['woman', 1, '#FFFFFF']
                   ];
        var store = new Ext.data.Store({
                    proxy: new Ext.data.MemoryProxy(data),
                    reader: new Ext.data.ArrayReader({}, PersonRecord)   --解析数据
                });
                
        store.load();
      var grid = new Ext.grid.GridPanel({
                  store: store,
                  columns: [                                              --指定列
                             { header: 'name', dataIndex: 'name' },
                             { header: 'sex', dataInex: 'sex' }
                           ],
                  autoHeight: true,
                  renderTo: 'grid',
                  viewConfig: {
                  forceFit: true,
                  enableRowBody: true,
                  getRowClass: function(record, rowIndex, p, ds) {       --主要通过这个函数来渲染行的颜色
                                var cls = 'white-row';
                                switch (record.data.color) {
                                    case '#FBF8BF':
                                        cls = 'yellow-row'
                                        break;
                                    case '#99CC99':
                                        cls = 'green-row'
                                        break;
                                    case '#F5C0C0':
                                        cls = 'red-row'
                                        break;
                                  }
                                  return cls;
                              }
                       }
                });
    });
2.给列设置颜色
function renderMotif(data,cell,record,rowIndex,columnIndex,store){
   var value = record.get('color');
   cell.attr = "style=background-color:" +value;  -- 给列的单元格添加style属性。
   return data;
}
这中方式跟单元格渲染方式一样，都是通过renderer属性来设置。
到这里学习了2种方式获取单元格的值：
(1),record.data['id']
(2) record.get('id');