PDA

View Full Version : Displaying Busy Indicator in application Initial Load



bevara.siva
20 Jun 2014, 3:02 AM
Hi,

We are using Ext JS 4.2.2

We need to display Busy Indicator/ Loading Text in the application initial load, as it is taking much time in the application initial load.

Please help!!!

Regards,
SivaPrasad.B

vardhan22
20 Jun 2014, 4:13 AM
You must have been using any of Ext.Component like panel, tabpanel,container etc. All of them has method called setLoading(""). You can use this method inside your application load/init method. For example: As soon as your first panel is loading, get the panel, set it, and when loading finished, set it to false.

Alternatively, you can follow this link http://stackoverflow.com/questions/1438375/extjs-mask-panel-while-actions-are-made for the same or for viewport masking follow http://stackoverflow.com/questions/10597722/extjs-4-setting-loading-mask-for-the-viewport

bevara.siva
24 Jun 2014, 5:08 AM
Hi Vardhan,

Thank you for the response. I tried setting the loading in the app.js (in the launch function before creating the view port). But this is showing the loading mask very late. I believe it is taking more time to load all the javascript files. So i tried setting the loading image in the index page itself by creating a css class and applying that css to a div element in teh body. Its properly setting the loading image and I am removing the div element once after the launch function in the app.js.

With this I am facing issue with the Z-index in the other css when I click on the other element.

Does anybody have any samples to set the loading in the index.html and hiding the same, once after the application is loaded.

Please help!!!

Regards,
SivaPrasad.B

vardhan22
24 Jun 2014, 5:16 AM
I am not sure what exactly your issue is, but i suppose you want this

http://stackoverflow.com/questions/11375521/loading-mask-that-disables-underlying-html-elements