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);
  　　   }
   }

效果图：

代码：

 1 var data = [
 2                        { 'id': 1, 'name': '小王', 'sex': '男' },
 3                        { 'id': 2, 'name': '小李', 'sex': '男' },
 4                        { 'id': 3, 'name': '小兰', 'sex': '女' }
 5              ];
 6 
 7             var store = new Ext.data.JsonStore({
 8                 data: data,
 9                 fields: ['id', 'name', 'sex']
10             });
11 
12             //创建模板 
13             var tplCum = new Ext.XTemplate(
14                  '<div><table style="border-bottom-style: groove; border-bottom- thin">',
15                  '<tr>                                                              ',
16                  '<td style="35px"></td>                                      ',
17                  '    <td style="300px">                                      ',
18                  '        <table><tr>                                               ',
19                  '        <td style="100px">姓名：{name}</td>                 ',
20                  '        <td style="100px">性别：{sex}</td>                  ',
21                  '        <td >邮箱：</td>                                          ',
22                  '        </tr></table>                                             ',
23                  '        </td>                                                     ',
24                  '    <td style="20px"></td>                                 ',
25                  '</tr>                                                             ',
26                  '<tr style="height:30px;color:blue;vertical-align: middle;">      ',
27                  '    <td >意见：</td>                                              ',
28                  '    <td ></td>                                                    ',
29                  '    <td >提出时间：{Time}</td>                                    ',
30                  '</tr>                                                             ', //每行以逗号隔开
31                  '</table></div>                                                    '  //最后一行不用逗号
32              );
33  
34              var AdviceGrid = new Ext.grid.GridPanel({
35                       store: store,
36                       height:300,
37                       region: 'center',
38                       autoScroll: true,
39                       containerScroll: true,
40                       stripeRows: true,
41                       frame: true,
42                       loadMask: {
43                           msg: '数据加载中，请稍等......'
44                       },
45                       cm: new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(),
46                              { header: "编号", dataIndex: "Id", tooltip: "编号", sortable: true, hidden: true,  50 },
47                         //模板
48                         { text: '描述', xtype: 'templatecolumn', tpl: tplCum,  400 },
49                         //按钮
50                         { header: "", dataIndex: "c_reply",  50,
51                           renderer: function (value, cellmeta) { return "<INPUT type='button' value='回复'>";}
52                         },
53                         { header: "", dataIndex: "c_agree",  50,
54                           renderer: function (value, cellmeta) { return "<INPUT type='button' value='采纳'>"; }
55                          }
56            
57                          ]),
58                       tbar: [{
59                           pressed: true,
60                           enableToggle: true,
61                           text: 'add',
62                           id: '_btnShowRead',
63                           iconCls: 'add',
64                           handler: function () {
65            
66                           }
67                       }, '-', {
68                           pressed: true,
69                           enableToggle: true,
70                           text: 'edit',
71                           id: '_btnShowAll',
72                           iconCls: 'edit',
73                           handler: function () {
74            
75                           }
76                       }],
77                       bbar: new Ext.PagingToolbar({
78                           pageSize: 20,
79                           store: store,
80                           displayInfo: true
81                       })
82               });
83 
84                   //添加cell单击事件
85              AdviceGrid.addListener('cellclick', cellclick);
86              function cellclick(AdviceGrid, rowIndex, columnIndex, e) {
87                  if (rowIndex < 0) {
88                      return;
89                  }
90                  var record = AdviceGrid.getStore().getAt(rowIndex); //Get the Record 
91                  var id = record.get('id');
92                  var fieldName = AdviceGrid.getColumnModel().getDataIndex(columnIndex); //Get field name 
93                  if (fieldName == "c_reply") {
94                      Ext.Msg.alert('c_reply', rowIndex + "  -  " + id);
95                  } else if (fieldName == "c_agree") {
96                      Ext.Msg.alert('c_agree', rowIndex + "  -  " + id);
97                  }
98              }