How to add and customize the loading screen?
When you deal with large data size, it's useful to display the loading screen showing users that the app is actually doing something.
The loading screen is displayed when content is being loaded in the page.
There are 2 ways you can add the loading screen to a component:
Please note, this parameter is available just for the Template and Iframe components.
To display the loading screen you should just set the parameter waitMessage to true (by default, the screen is hidden):
dhx.ui({ view:"iframe", src:"http://dhtmlx.com", waitMessage:true })
To add the default loading screen to any component (e.g. to grid containing a big number of records), use the following code:
dhx.extend($$('componentId'), dhx.ui.overlay);
$$('componentId').showOverlay();
$$('componentId').hideOverlay();
dhx.ui.overlay is the related css class for the loading screen. It has the following definition:
.dhx_loading_overlay{ width:100%; height:100%; background-color:#D6D6D6; opacity:0.5; background-image:url(./imgs/loading.png); background-repeat:no-repeat; background-position:center; }
To customize the screen just redefine the needed attributes in <style> block of your page. The untouched attributes will take default values.
<!DOCTYPE HTML> <html> <head> <link rel="stylesheet" href="../../../codebase/touchui.css" type="text/css" media="screen" charset="utf-8"> <script src="../../../codebase/touchui.js" type="text/javascript" charset="utf-8"></script> </head> <body> <style> .dhx_loading_overlay{ background-color:#6699FF; } </style> .... </html>
In the example above we redefined only background color. All the other attributes defined in the '.dhx_loading_overlay' class took the default values.
Related sample: 09_template/02_ajax_content.html