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()

更新

谢谢你，料斗和劳伦，缺少的一件事是我在运行processingStuff()方法之前需要一些延迟，如下所述：Extjs Load Mask while long processing

以下是基于Lauren小提琴的示例：http://jsfiddle.net/WbMSW/

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

Answer 1

您可以停用按钮button.setDisabled(true)，它会获得您可以在CSS中设置样式的类x-item-disabled（默认情况下）。请参阅：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' );
};

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

3 个答案: