2

ビューポートの読み込みに時間がかかるため、ビューポートの読み込みマスクを設定しようとしています。私はこれを試しました：

Ext.define('MY.view.Viewport', {
    extend: 'Ext.Viewport',
    alias: 'widget.dispviewport',

    initComponent: function() {
        var me = this;
        var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
//      myMask.show();
        Ext.apply(me, {
            id : 'main-viewport',
            listeners: {
                beforerender: function() {
                    myMask.show();
                },
                afterrender: function() {
                    myMask.destroy();
                }
            },
            renderTo: 'id-sym-container',
            layout: {...

しかし、私は決して入らないようbeforerenderです。関数で試してみましconsole.logたが、beforerender表示されません。私がこのようにしようとすると：

Ext.define('MY.view.Viewport', {
    extend: 'Ext.Viewport',
    alias: 'widget.dispviewport',

    initComponent: function() {
        var me = this;
        var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
        myMask.show();
        Ext.apply(me, {
            id : 'main-viewport',
            listeners: {
//              beforerender: function() {
//                  myMask.show();
//              },
                afterrender: function() {
                    myMask.destroy();
                }
            },

それは機能しますが、私のマスクは遅すぎます。beforerender間違った方法を使用していますか？レンダリングを開始しmyMaskたときに正確に開始する方法は何ですか？Viewport

ありがとう

レロン

4

2 に答える 2

1

あなたのコードは の読み込みマスクを設定していませんviewportが、body

あなたができることは、それを行うコードのビットです...

Ext.create('MY.view.Viewport');

のように見えるはずです..

 var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
 viewport = Ext.create('MY.view.Viewport');
 viewport.on('afterrender',function(){myMask.destroy();},this);

コメントの人たちは正しいけど:P

于 2012-05-18T13:13:41.037 に答える
1

ExtJs 4 では、ビューポートでロードマスクを宣言できます。

Ext.define('Tps.view.Viewport', {
    extend: 'Ext.container.Viewport',
    alias: 'widget.viewport',

    initComponent: function () {
        Ext.apply(this, {
            layout: 'fit',
            items: [
                {
                    xtype: 'loadmask',
                    id: 'load-indicator',
                    indicator: true,
                    hidden: true,
                    target: this
                }
            ]
        });
        this.callParent();
    }
});

ターゲット構成はビューポート自体であることに注意してください。ロード マスクを表示/非表示にするには、

Ext.getCmp('load-indicator').show();
Ext.getCmp('load-indicator').hide();

ビューポートのレンダリング イベントでロード マスクを表示するか、非表示の構成を false に設定します。

于 2013-08-30T15:20:12.377 に答える