向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 }