I'm trying ti set up a loading mask for my viewport, because it takes a lot of time to load it. I've tried this:

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: {...

but it seems that I never get into beforerender. I tried with console.log in the beforerender function and it also doesn't appear. When I try like this:

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();
                }
            },

it works but my mask is showing way too late. Am I using beforerender wrong way and what's the way to start myMask exactly when my Viewport starts to render?

Thanks

Leron

I'm trying ti set up a loading mask for my viewport, because it takes a lot of time to load it. I've tried this:

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: {...

but it seems that I never get into beforerender. I tried with console.log in the beforerender function and it also doesn't appear. When I try like this:

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();
                }
            },

it works but my mask is showing way too late. Am I using beforerender wrong way and what's the way to start myMask exactly when my Viewport starts to render?

Thanks

Leron

• javascript
• extjs

• Why is it taking too long to load your view port? Have you bined and minified all JS files using Sencha SDK? – sha Commented May 15, 2012 at 10:25
• The situation is - there are 4-8 people who have been working on this project before me, and the main problem is that ExtJS is brand new to me, so it takes a lot of time to understand the different features and when I get a new task I just go straight forward. To your question - I don't know if this has been done but since it's in production state I guess nothing is minified. But I thinks there has to be a way to launch the loading mask at the very begining, the beforerender function seemed like the perfect solution but it just doesn't work so...still searching... – Leron Commented May 15, 2012 at 11:30
• I don't want to drag you, but I really think you're trying to solve wrong problem. Check in the network traffic - how many JS files your app loads? Usually in production environment you should load one big file for ExtJs and one big file for your app (images and css are of course not included). It makes huge difference with non-minified app. In my case - regularly my app loads about 40 sec, after minifying - ~5 – sha Commented May 15, 2012 at 12:26
• It loads about 5 files. I'm pretty sure there's nothing minified, and I'm sure your right, but I'm not in position to set the way this project is going. Sadly my task is to set Loading icon for the time the Viewport is loading itself and I search for a good way to do it. If I can't use something like beforerender the mask appears too late when half of the time has already passed. In this case the only workaround is to find another way to execute the Loading mask when the Viewport starts to load. – Leron Commented May 15, 2012 at 13:15
• In this case you need to look at presenting mask from the HTML page itself, because nothing will be executed from the ExtJs code until everything is loaded. But please take a look at this sencha./products/sdk-tools - it's not as plicated as you might think - and you will gain tremendous value from it – sha Commented May 15, 2012 at 13:17

2 Answers 2

Your code isn't setting a loading mask for the viewport, but for the body

Ergo what you can do is, the bit of code that does...

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

should look like..

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

The guys in the ments are right though :P

In ExtJs 4, you can declare the loadmask in the viewport:

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

Note the target config is the viewport itself. To show/hide the load mask, make a call to

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

Show the load mask in the render event for the viewport or set the hidden config to false.