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()禁用整个列，这似乎是正确的逻辑（请参阅this method）。

解决方法是实现自己的禁用/启用逻辑。我从原始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;
}

这里是demo。

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

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

1 个答案: