0

タブパネルベースのアプリはほぼ完成していますが、タブパネルの各タップに表示され、特定のタブのコンテンツがレンダリングされると消えるグローバルロードマスクを追加して改善したいと思います。

何をリッスンする必要があるのか​​少しわかりません。activeitemchangeでロードマスクをアクティブにしてから、グローバルペイントイベントを使用してマスクを解除する必要がありますか？これを行う最も効率的な方法はメインコントローラーであると想定しています。複数のリスナーを使用する代わりに、1回だけ実行する必要があるためです（私が見つけた唯一の例のように）。これは機能しているようで、タブアイテムをクリックするとロードマスクが表示されますが、ペイントされたイベントでマスクを解除する方法がわかりません。

Ext.define('TCApp.controller.Main', {
extend: 'Ext.app.Controller',

config: {
refs: {
     tabpanel: 'tabpanel'
},
control: {
     tabpanel: {
     activeitemchange: 'onActiveItemChange'
                   }
         }
},
onActiveItemChange: function (self, newItem) {
    Ext.Viewport.setMasked({ xtype: 'loadmask', message: 'Loading...', indicator:true});
    console.log('Activeitemchanged');
}
});

Ext.Viewport.setMasked(false);これは、メインコントローラーでペイントされたイベントを実行するための最良の方法ですか？これを行う方法がよくわかりません。

私もこれを読んでいますが、あまり役に立たないと思います：

http://senchaexamples.com/2012/03/05/determining-when-the-active-item-changes-on-an-ext-tabpanel-container-in-sencha-touch-2/

4

1 に答える 1

1

タブパネルでアクティブなアイテムを変更すると、「ペイント」イベントがトリガーされるかどうかはわかりません（テストできます）。私の頭の上から（これをテストしていません）、いくつかのオプションがあります。タブ パネルのコントロール構成に 'activate' イベントを追加してみてください。ドキュメントによると、これはコンテナー内の項目がアクティブ化されたときに発生します。

それが機能しない場合は、onActiveItemChange 関数に対して次のようなことを試すことができます。

onActiveItemChange: function (self, newItem) {
    Ext.Viewport.setMasked({ xtype: 'loadmask', message: 'Loading...', indicator:true});
    console.log('Activeitemchanged');
    newItem.on('painted', this.hideMask, this);
    //might need to try newItem.element.on('painted', this.hideMask, this);
},
hideMask: function() {
    Ext.Viewport.setMasked(false);
}
于 2012-08-08T17:08:42.523 に答える