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

Question

The code snippet as following:

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();
                }
           }]
        }]
    }
});

Let's say i have the grid panel like above, i'd like to disable this button once clicked, and then something running in background, after the thing is finished, enable this button.

But the only way i found just like my above code, the whole column of buttons were disabled which is not my wish.

My question is, how to accomplish what i want? Thanks

Answer 1

item.disable() disables the whole column and this seem to be the correct logic (see this method ).

The workaround is to implement your own disabling/enabling logic. I copy-pasted some parts from original disable/enable methods (eg view.disabledCls ). You may want to replace them with your own code. But anyway, here's the workaround:

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;
}

Here's a demo .

And by the way, no need to specify xtype: 'button' . ExtJs will use plain clickable <img> in any case.