日期:2014-05-16 浏览次数:20501 次
先来张图片,做出来的样子如下:
源码
function appgroup_message_list(mainpanel){ var checkbox = new Ext.grid.CheckboxSelectionModel();//单选框 var cm = new Ext.grid.ColumnModel([ checkbox, {header: _("Name"), width: 80, sortable: true, dataIndex: 'appgroup'}, {header: _("Description"), width: 80, sortable: true, dataIndex: 'description'}, {header: _("Status"), width: 80, sortable: true, dataIndex: 'status'}, {header:_("Manage"),dataIndex:"manage_button",width:80,renderer: function(){return " <button type='button' onclick=''>Manage</button>"}},//这里用的是renderer,放入了一个button {header:_("Delete"),dataIndex:"delete_button",width:80,renderer: function(){return " <button type='button' onclick=''>Delete</button>"}}, ]); var app_group_store = new Ext.data.JsonStore({//发url请求去后台得到列表数据 url: '/apply/get_application_group_list', root: 'rows', fields: ['appgroup'], successProperty:'success', listeners:{ loadexception:function(obj,opts,res,e){ var store_response=Ext.util.JSON.decode(res.responseText); Ext.MessageBox.alert(_("Error"),store_response.msg); } } }); app_group_store.load(); var grid = new Ext.grid.GridPanel({ cm:cm, selModel:checkbox, store: app_group_store, stripeRows: true, frame:false, autoExpandColumn:1, autoHeight:true, autoExpandMax:300, autoExpandMin:150, maxHeight:100, enableHdMenu:true }); grid.addListener('cellclick',cellclick); //添加触发的函数 function cellclick(grid, rowIndex, columnIndex, e) { var record = grid.getStore().getAt(rowIndex);//这里得到的是一个对象,即你点击的某一行的一整行数据 //alert(record.data.appgroup);//取出其中元素appgroup的值 var fieldName = grid.getColumnModel().getDataIndex(columnIndex); if (fieldName == 'manage_button'){//通过加判断条件限制当点击某个列表内容的时候触发,不然只要你点列表的随便一个地方就触发了。 //show_user_manager(record); } else if (fieldName == 'delete_button'){ delete_app_group(record.data.appgroup,mainpanel); } } return grid; }
很简单吧