ExtJS 4.2 first time to load some complex view takes a few seconds

Question

I have an Application with a Nav Menu, on each Nav item clicked a Tab is created with it's corresponding view.

Here is an exmaple code that Im using to create the tab with it's view:

 var me = this;

        var newTab = me.getMainTab().add({
            xtype: 'employeeview',
            closable: true,
            iconCls: "key",
            title: 'Employee View'
        });

        me.getMainTab().setActiveTab(newTab);

When it's the first time that the View is loaded it takes 1 to 3 seconds to render. The next time loads immediately. So I was wondering if I can show a Mask like "Loading View..." in order to avoid this Freezing sensation to the user.

Answer 1

If you want to mask the tab panel then:

var tabpanel = me.getMainTab();
tabpanel.mask('Loading...');
// add a new tab
tabpanel.unmask();