以下是用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,可以设置图标、提示信息和处理函数等属性。在实现过程中,我们可以根据具体的需求,添加、删除或修改按钮的属性,以实现不同的操作功能。

用extjs grid组件实现一个最后一列带有操作按钮的列表

原文地址: https://www.cveoy.top/t/topic/b4PW 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录