Loading mask does not show

Question

I create a webpage which has some elements of ext js embedded in it. I am having a problem displaying a loading mask especially when there is so much data to load. In this example, I am using color box to create a popup window. Inside the popup window, I want to display ext js data grid where a user can select items. The problem is in the speed in which the grid loads. It takes a while before it fully loads.

The page is : http://ictpunt.be, click on the 'add offer' button to see the popup.

I would like to display a loading mask while it is loading. I have tried doing it on the viewport, but it only shows when the data is about to load. So a user has to look at the blank screen for close to 10 seconds before the loadmask msg appears! Here is a piece of my code

Ext.create('Ext.Viewport', {
    items: [ contentPanel ],
    renderTo: 'content',
    loadMask: true,
    viewConfig: {
        loadingText: "Loading, please wait..."
    },
....
});

Ext.panel.Grid should apply a loading mask automatically when it is loading data. — forgivenson
i want a loading mask for the entire page i.e. to be shown before any of the page elements show up. if u check the link i gave, u will realise it takes a while before any page element shows up, not just the grid. — nixxx

pherris pherris · Accepted Answer · 2014-08-21T17:01:32

You want the setLoading method on the instance of the Viewport that you are creating:

myViewport = Ext.create('Ext.Viewport', {
    renderTo: 'body'
});
myViewport.setLoading('Loading, please wait...');
setTimeout(function () { myViewport.setLoading(false); }, 2000);

Loading mask does not show

1 Answers