ExtJS4でグリッドカラムの動的変更時のロードマスクの使い方、およびロードマスクとディレイの組み合わせメモ

gistfile1.js

// カラムモデルの管理 (シングルトン)
Ext.define('ColumnDefApplyer', {
    singleton: true,
    currentColumnDefs: "",
    currentColumnModel: null,
    load: function () {
        // hiddenに格納されているカラム定義のJSONを読み込む
        var columnDefs = Ext.fly('MainContent_TableColumnModelJSON').dom.value;
        if (columnDefs != this.currentColumnDefs) {
            // 現在保持しているカラム定義と一致しなければ
	    // JSONをカラムモデルとして評価して、戻り値としてtrueを返す
            this.currentColumnDefs = columnDefs;
            this.currentColumnModel = eval('(' + columnDefs + ')');
            return true;
        }
	// 変更なければfalseを返す.
        return false;
    }
});

// データのロードと一緒に、カラムモデルも変更する
var runTask = function () {
    if (ColumnDefApplyer.load()) {
        // カラムレイアウト変更ありのデータロードの場合は
        // ローディングマスクを出す. (IEだと画面が数秒間固まるため)
        grid.setLoading(true);
        Ext.Function.defer(function () {
            // ウェイトボックス表示が完了してから、
            // レイアウト変更を行う.
            grid.reconfigure(store, ColumnDefApplyer.currentColumnModel);
            // データのロードも行う
            logicSearch();
            // 完了後にローディングマスクを解除する.
            grid.setLoading(false);
        }, 100);

    } else {
        // レイアウト変更なしのデータロード
        logicSearch();
    }
};


//
// イベントで逐次バックグラウンドで問い合わせるタイプで
// 一定時間内に応答がない場合にロードマスクする場合
//
var eventLock = false;
var ldMask = new Ext.LoadMask(Ext.getBody(), { msg: "Please wait..." });
var ldMaskShow = new Ext.util.DelayedTask(function () {
    if (eventLock) {
        ldMask.show();
    }
});


// ※ イベントごとに以下のようにディレイで呼び出す.
    eventLock = true;
    ldMaskShow.delay(500);

// ※ 完了後、以下を呼び出す
    eventLock = false;
    ldMask.hide();