0

使用 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按钮上的事件没有及时触发，我能想到的唯一解决方案是使用掩码或setLoading()按照 Lauren 的建议使用：http:// jsfiddle.net/G9tqx/6/（我不能使用网络工作者，因为它们在 IE8 中不受支持）

4

3 回答 3

0

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

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

于 2013-08-13T18:22:00.013 回答
0

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;
}
于 2013-08-13T18:46:01.810 回答
-1

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

function myHandler(button) {
    $('selector').css( 'cursor', 'wait' );
    processingStuff();  // This might take 10 seconds
   $('selector').css( 'cursor', 'default' );
};
于 2013-08-12T21:40:21.117 回答