添加删除按钮 extjs 网格

Question

我有一个网格面板，我希望在其中为每一行添加一个删除按钮。当用户单击按钮时，该行将被删除。我还想在底部有一个保存按钮，它可以帮助用户在网格中添加一行。问题是我正在动态添加行。因此，对于每一行，删除图标也应该像这样添加。

我的要求只是 2 列。一个显示名称，另一个显示删除图标。

请告诉我如何动态地将图标添加到每一行。我已经有一个 CSS，它是这样的：

.icon-delete {
    background-image: url(../images/delete.png) !important;
}

此 CSS 位于不同的文件中。我是 extjs 新手，所以我对这些功能没有太多经验。

编辑：

我尝试了以下方法，但没有显示图标。请告诉我我哪里错了。

columns : [{
    text : 'Name', 
    dataIndex : 'name', 
    width : '50%'
},
{
    xtype : 'actioncolumn',
    draggable : false,
    hideable : false,
    menuDisabled : true,
    width:'50%',
    items : [{
        iconCls: 'icon-delete',
        tooltip: 'Delete',
        scope: this,                   
    }]
}]

Answer 1

您应该使用Ext.grid.column.Action 类，如下所示：

{
    xtype:'actioncolumn',
    width:20,
    items: [{
        iconCls: 'icon-delete',
        tooltip: 'Delete',
        handler: function(grid, rowIndex, colIndex) {
            grid.getStore().removeAt(rowIndex);
        },
        scope: this
    }]
}

课程文档：http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.grid.column.Action