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

アップデート：

ホッパーとローレンに感謝します。不足していたのは、processingStuff()ここで説明されているように、メソッドを実行する前に遅延が必要だったことです: Extjs Load Mask while long processing

ローレンのフィドルに基づくサンプルを次に示します: http://jsfiddle.net/WbMSW/

上記のサンプルは IE では機能しません。理由はわかりませんhover。ボタンのイベントが時間内にトリガーされていないと思います。考えられる唯一の解決策は、マスクを使用するかsetLoading()、Lauren が提案したように使用することです: http:// jsfiddle.net/G9tqx/6/ (Web ワーカーは IE8 でサポートされていないため使用できません)

4

3 に答える 3

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 で適切なカーソル スタイルを設定する方がよいでしょう。そうすれば、追加のスタイルを追加したい場合は、JavaScript を乱雑にするのではなく、CSS で行うことができます。

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 に答える
0

ボタンを無効にすることができます.cssでスタイルを設定できるbutton.setDisabled(true)クラスx-item-disabledを（デフォルトで）取得します。参照: http://jsfiddle.net/Xgx5x/

も使用できますbutton.setLoading(true)。

于 2013-08-13T18:22:00.013 に答える
-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 に答える