extjs 3.4 向grid添加按钮列

向grid添加按钮列只要有两步：

1、创建按钮列，

//按钮
{ header: "", dataIndex: "c_reply",  50,
 renderer: function (value, cellmeta) { return "<INPUT type='button' value='回复'>";}
},

2、添加单元格单击事件

  //添加cell单击事件
  AdviceGrid.addListener('cellclick', cellclick);
  function cellclick(AdviceGrid, rowIndex, columnIndex, e) { 　　    var record = AdviceGrid.getStore().getAt(rowIndex); //Get the Record 
　　     var id = record.get('id');
　　     var fieldName = AdviceGrid.getColumnModel().getDataIndex(columnIndex); //Get field name 
　　     if (fieldName == "c_reply") {
               Ext.Msg.alert('c_reply', rowIndex + "  -  " + id);
 　　    } else if (fieldName == "c_agree") {
                Ext.Msg.alert('c_agree', rowIndex + "  -  " + id);
  　　   }
   }

效果图：

代码：

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- thin">',
                 '<tr>                                                              ',
                 '<td style="35px"></td>                                      ',
                 '    <td style="300px">                                      ',
                 '        <table><tr>                                               ',
                 '        <td style="100px">姓名：{name}</td>                 ',
                 '        <td style="100px">性别：{sex}</td>                  ',
                 '        <td >邮箱：</td>                                          ',
                 '        </tr></table>                                             ',
                 '        </td>                                                     ',
                 '    <td style="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,  50 },
                        //模板
                        { text: '描述', xtype: 'templatecolumn', tpl: tplCum,  400 },
                        //按钮
                        { header: "", dataIndex: "c_reply",  50,
                          renderer: function (value, cellmeta) { return "<INPUT type='button' value='回复'>";}
                        },
                        { header: "", dataIndex: "c_agree",  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
                      })
              });

                  //添加cell单击事件
             AdviceGrid.addListener('cellclick', cellclick);
             function cellclick(AdviceGrid, rowIndex, columnIndex, e) {
                 if (rowIndex < 0) {
                     return;
                 }
                 var record = AdviceGrid.getStore().getAt(rowIndex); //Get the Record 
                 var id = record.get('id');
                 var fieldName = AdviceGrid.getColumnModel().getDataIndex(columnIndex); //Get field name 
                 if (fieldName == "c_reply") {
                     Ext.Msg.alert('c_reply', rowIndex + "  -  " + id);
                 } else if (fieldName == "c_agree") {
                     Ext.Msg.alert('c_agree', rowIndex + "  -  " + id);
                 }
             }