Extjs 5 Progress bar during initComponent - extjs

Question

I have a tab panel, and I perform a server request in it's initComponent method to add tabs according to the result. This process can take a long time, and I would like to display a progress bar during the begining of initComponent, till the end (before the callParent call method for example).
Is it possible to achieve this behaviour ?
Thanks a lot !

Answer 1

You can use a LoadMask on any pretty much any component, here is an example, there is also a fiddle:
Ext.application({
name: 'Fiddle',
launch: function() {
var store = Ext.create('Ext.data.JsonStore', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
autoLoad: true,
proxy: {
type: 'ajax',
url: 'data1.json',
reader: {
type: 'json',
rootProperty: 'characters'
}
},
listeners: {
load: function() {
console.log(this);
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: store,
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
var myMask = new Ext.LoadMask(grid, {msg:"Please wait..."});
myMask.show();
var timeout = setTimeout(function() {
myMask.hide();
}, 5000);
}
});
I've added a setTimeout to replicate a long loading request, you do not need to use this.

Answer 2

You do not need to rely on "callParent" method. You have two options:
Make your server request synchronously. (by setting async:false for your ext.ajax call or for the related operation) It causes your code to be waited till the response comes.it blocks UI interaction but makes you sure having response immediately in line after server call
Another way is calling this.setLoading(true) before calling ajax call and setting this.setLoading(false) in your ajax/operation callback method. Note that this should refer to your main component. So it is bettor to save it in a variable at initComponent first line. For example by a line like var me= this;. After that refer to current main component bymeinstead ofthis`

Answer 3

var progressBar = Ext.create('Ext.ProgressBar');
progressBar.wait({
interval: 1000,
duration: 10000,
increment: 10,
text: 'Adding tabs...',
scope: this,
fn: function() {
var tabPanel = Ext.create('Ext.tab.Panel');
me.add(tabPanel);
tabPanel.add({
xtype: 'panel',
title: 'Main tab'
});
tabPanel.add({
xtype: 'panel',
title: 'Chunk'
});
tabPanel.add({
xtype: 'panel',
title: 'My girl'
});
progressBar.hide();
}
});
Fiddle