在处理 Ext.Button 处理程序时更改光标样式

Question

使用 ExtJS 4，我有一个 Ext.Button 和一个需要一段时间才能运行的处理程序函数。在它运行时，按钮看起来像是被按下了，而光标一直看起来像指针。

我想更改光标样式以显示为等待（即 CSS 样式 wait）。这是我需要更改的示例代码：

function myHandler(button) {
    //1. TODO: Change the cursor to wait
    processingStuff();  // This might take 10 seconds
    //2. TODO: Change the cursor back to the default
};
Ext.application({
    name: 'Ext.Array.clean()',
    launch: function () {
    Ext.create('Ext.Button', {
        text    : 'My Button',
        renderTo: Ext.getBody(),
        handler : myHandler
    });
    } // launch
}); // Ext.application()

更新：

谢谢 hopper 和 Lauren，缺少的一点是我需要一些延迟才能运行 processingStuff() 方法，如下所述：Extjs Load Mask while long processing

这是一个基于 Lauren 小提琴的示例：http://jsfiddle.net/WbMSW/

上面的示例在IE中不起作用，我不知道为什么，我猜按钮上的hover事件没有及时触发，我能想到的唯一解决方案是使用掩码或使用@987654329 @正如劳伦建议的那样：http://jsfiddle.net/G9tqx/6/（我不能使用网络工作者，因为它们在 IE8 中不受支持）

Answer 1

您可以禁用您的按钮button.setDisabled(true)，它会获得x-item-disabled（默认情况下）您可以在您的CSS 中设置样式的类。见：http://jsfiddle.net/Xgx5x/

您也可以使用button.setLoading(true)。

Answer 2

您可以使用getEl 和setStyle 方法直接在按钮元素上设置样式：

new Ext.button.Button({
    text: 'My Button',
    renderTo: Ext.getBody(),

    handler: function(button) {
        var el = button.getEl();

        el.setStyle({ cursor: 'wait' });
        processingStuff();
        el.setStyle({ cursor: 'default' });
    }
});

或者，最好在按钮上设置一个 CSS 类，然后在 CSS 中设置适当的光标样式。这样，如果你想添加额外的样式，你可以在 CSS 中完成，而不是把你的 Javascript 弄得乱七八糟。

Javascript：

new Ext.button.Button({
    text: 'My Button',
    renderTo: Ext.getBody(),

    handler: function(button) {
        button.addCls('button-working');
        processingStuff();
        button.removeCls('button-working');
    }
});

CSS：

.x-btn.button-working {
    cursor: wait;
}

Answer 3

您可以使用 jquery 来实现您的目标。

function myHandler(button) {
    $('selector').css( 'cursor', 'wait' );
    processingStuff();  // This might take 10 seconds
   $('selector').css( 'cursor', 'default' );
};