Sencha.ExtJs [4.2]：如何在列项目的处理程序中仅禁用一个操作按钮？

Question

代码片段如下：

Ext.create("Ext.tree.Panel", {
    renderTo: $(".gsBasciInfo")[0],
    store: "basic_grid_store",
    useArrows: true,
    rootVisible: false,
    columns: {
        items: [{
            text: 'id',
            dataIndex: 'id',
            align: "right",
        }, {
            xtype: 'actioncolumn',
            items: [{
                xtype: 'button',
                iconCls: 'icon-edit',
                tooltip: '编辑',
                handler: function(view, rowIndex, colIndex, item, e, record) {
                    item.disable();
                    //do something
                    item.enable();
                }
           }]
        }]
    }
});

假设我具有上面的网格面板，单击后我想禁用此按钮，然后在后台运行某些东西，完成操作后，启用此按钮。

但是，就像我上面的代码一样，我发现唯一的方法是禁用整个按钮列，这不是我的愿望。

我的问题是，如何完成我想要的？ 谢谢

Answer 1

item.disable()禁用整个列，这似乎是正确的逻辑（请参阅此方法 ）。

解决方法是实施您自己的禁用/启用逻辑。 我从原始的disable/enable方法（例如view.disabledCls ）中复制粘贴了某些部分。 您可能需要用自己的代码替换它们。 但是无论如何，这是解决方法：

handler: function(view, rowIndex, colIndex, item, e, record) {
    var me = this;

    if (me.disabledEl === e.target) {
        return;
    }

    me.disabledEl = e.target;
    Ext.fly(e.target).addCls(view.disabledCls);

    //do something

    Ext.fly(e.target).removeCls(view.disabledCls);
    me.disabledEl = null;
}

这是一个演示 。

顺便说一句，无需指定xtype: 'button' 。 在任何情况下，ExtJ都将使用可点击的<img> 。