网格中的 ExtJS 4 按钮可编辑、删除一行。在新选项卡中打开编辑表单答案

【问题标题】：ExtJS 4 buttons in grid to edit, delete a row. open edit-form in a new tab网格中的 ExtJS 4 按钮可编辑、删除一行。在新选项卡中打开编辑表单
【发布时间】：2011-12-05 21:40:06
【问题描述】：

基本上我的问题分为两部分。 ExtJS 4 示例中有扩展网格的示例。但它们不起作用:(我在新推荐的 mvc 应用程序模式中使用 ExtJS 4。

将第一列添加到带有编辑和删除按钮的网格中
网格是选项卡面板的第一个选项卡。如果按下编辑按钮，则应创建一个新选项卡并将其绑定到商店。
新按钮应打开一个标签页，其中包含绑定到商店的空表单

有人有这方面的经验吗？任何工作代码示例？我感谢您的帮助！谢谢！

【问题讨论】：

“ExtJS 4 示例中有扩展网格的示例。但它们不起作用” - 您发现哪些示例不起作用？您是否尝试过创建一些代码并在其中遇到任何错误？如果您的代码中有任何未解决的问题，请在此处发布。
它展示了如何使用可扩展的图标和复选框来扩展网格以进行多选。 (dev.sencha.com/deploy/ext-4.0.2a/examples/grid/…) 但它没有展示如何连续实现真正的按钮或工具栏。我还需要一个模型来处理对它们的点击。将工具栏或按钮添加为列不起作用。没有错误，但屏幕被搞砸了。到目前为止，我为我解决了这个问题。选择一行会激活 tbar 中的按钮。

标签： extjs extjs4 extjs-mvc

【解决方案1】：

我找到了一种添加按钮（或更准确地说是图像）的方法。

所以你需要添加带有 xtype: 'actioncolumn' 的新列，并将每个按钮（图像）描述为项目。

例如：

...
columns: [
            {
                text: 'Name',
                dataIndex: 'registrant_name',
                flex: 1
            }, {
                xtype: 'actioncolumn',
                width: 40,
                items: [{
                    icon: 'path_to_img',
                    handler: function(grid, rowIndex, colindex) {
                        alert('click!');
                    }
                }]
            }
        ],
...

还有文档页面上的链接： http://docs.sencha.com/ext-js/4-0/#!/api/Ext.grid.column.Action

【讨论】：