用extjs grid组件实现一个最后一列带有操作按钮的列表
以下是用ExtJS Grid组件实现带有操作按钮的列表的示例代码:
Ext.create('Ext.grid.Panel', {
title: 'My Grid Panel',
store: myStore, // 假设有一个名为myStore的数据存储器
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' },
{
xtype: 'actioncolumn',
text: '操作',
items: [{
iconCls: 'x-fa fa-edit', // 编辑按钮的图标
tooltip: '编辑',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
// 处理编辑操作
}
}, {
iconCls: 'x-fa fa-trash', // 删除按钮的图标
tooltip: '删除',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
// 处理删除操作
}
}]
}
],
height: 400,
width: 600,
renderTo: Ext.getBody()
});
在这个示例代码中,我们在ExtJS Grid组件的第四列中添加了一个ActionColumn组件,用于显示操作按钮。每个按钮都有一个图标和一个提示信息,当用户点击按钮时,会触发相应的处理函数。
注意,实现这个操作按钮的关键在于使用了ExtJS的ActionColumn组件。在ActionColumn中,每个按钮都是一个ActionItem,可以设置图标、提示信息和处理函数等属性。在实现过程中,我们可以根据具体的需求,添加、删除或修改按钮的属性,以实现不同的操作功能。
原文地址: https://www.cveoy.top/t/topic/b4PW 著作权归作者所有。请勿转载和采集!