extjs - レンダリング時にマスクをパネルの中央に配置する方法

Question

コンテンツの読み込み中に、パネルにマスクされた読み込みインジケーターが必要な単純なシナリオがあります。次のコードを使用してマスクを正常に動作させていますが、最初に呼び出したときに読み込みインジケーターが上部に表示されます。パネルが表示された後に呼び出す場合、つまり. ボタン イベントでは、マスクがパネルの中央に正しく表示されます。何か案は？

var pnl = new Ext.Panel({
    title: 'test',
    width: 500,
    height: 500,
    renderTo: 'controls',
    listeners: {
        render: function(comp) {
            comp.load();
        }
    },
    load: function() {
       this.el.mask('loading...', 'loadingMask');
    }
});

Answer 1

HTMLが完全にレンダリングされる前に、マスクがパネルに適用されているようです。簡単な解決策は、マスクを適用する直前にマスクを遅らせることでした.

render: function(comp) {
    setTimeout(function() { comp.loadPermissions(); }, 100);
}

Answer 2

「render」リスナーからも this.el.mask() を呼び出すだけです。this.load メソッドでマスクを呼び出す前に、this.rendered プロパティも確認してください。