extjs 3.4 使用XTemplate 改变grid行的显示方式

为了对grid的行显示变得多样式，使内容的布局更定制。

效果图：

代码：

            var data = [
                       { 'id': 1, 'name': '小王', 'sex': '男' },
                       { 'id': 2, 'name': '小李', 'sex': '男' },
                       { 'id': 3, 'name': '小兰', 'sex': '女' }
             ];

            var store = new Ext.data.JsonStore({
                data: data,
                fields: ['id', 'name', 'sex']
            });

            //创建模板 
            var tplCum = new Ext.XTemplate(
             '<div><table style="border-bottom-style: groove; border-bottom-width: thin">',
             '<tr>                                                              ',
             '<td style="width:35px"></td>                                      ',
             '    <td style="width:300px">                                      ',
             '        <table><tr>                                               ',
             '        <td style="width:100px">姓名：{name}</td>                 ',
             '        <td style="width:100px">性别：{sex}</td>                  ',
             '        <td >邮箱：</td>                                          ',
             '        </tr></table>                                             ',
             '        </td>                                                     ',
             '    <td style="width:20px"></td>                                 ',
             '</tr>                                                             ',
             '<tr style="height:30px;color:blue;vertical-align: middle;">      ',
             '    <td >意见：</td>                                              ',
             '    <td ></td>                                                    ',
             '    <td >提出时间：{Time}</td>                                    ',
             '</tr>                                                             ', //每行以逗号隔开
             '</table></div>                                                    '  //最后一行不用逗号
        );

            var AdviceGrid = new Ext.grid.GridPanel({
                      store: store,
                      height:300,
                      region: 'center',
                      autoScroll: true,
                      containerScroll: true,
                      stripeRows: true,
                      frame: true,
                      loadMask: {
                          msg: '数据加载中，请稍等......'
                      },
                      cm: new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(),
                             { header: "编号", dataIndex: "Id", tooltip: "编号", sortable: true, hidden: true, width: 50 },
                        //模板
                        { text: '描述', xtype: 'templatecolumn', tpl: tplCum, width: 400 },
                        //按钮
                        { header: "", dataIndex: "c_reply", width: 50,
                          renderer: function (value, cellmeta) { return "<INPUT type='button' value='回复'>";}
                        },
                        { header: "", dataIndex: "c_agree", width: 50,
                          renderer: function (value, cellmeta) { return "<INPUT type='button' value='采纳'>"; }
                         }
           
                         ]),
                      tbar: [{
                          pressed: true,
                          enableToggle: true,
                          text: 'add',
                          id: '_btnShowRead',
                          iconCls: 'add',
                          handler: function () {
           
                          }
                      }, '-', {
                          pressed: true,
                          enableToggle: true,
                          text: 'edit',
                          id: '_btnShowAll',
                          iconCls: 'edit',
                          handler: function () {
           
                          }
                      }],
                      bbar: new Ext.PagingToolbar({
                          pageSize: 20,
                          store: store,
                          displayInfo: true
                      })
                });

Ps：模板要注意的地方{name}获取store里的值。

{ text: '描述', xtype: 'templatecolumn', tpl: tplCum, width: 400 },这句是设置模板列