PDA

View Full Version : Preload animation/image for app



env0ke
21 Aug 2011, 9:58 PM
Hi all

In ExtJS API docs when open we see preload animation (with gears). How i can set image or animation for my application? /:)

skirtle
22 Aug 2011, 6:56 PM
It's mostly just CSS and a loadmask. The code & CSS for the docs are included in the zip of the ExtJS download so you can see how it's done for yourself.

Though you can just change the CSS it's probably better to add some custom CSS classes unless you want all loadmasks to be changed.


.x-mask-msg .custom-mask-loading {
background-image: url('loading.gif');
background-position: center center;
height: 150px;
width: 150px;
}


var myMask = new Ext.LoadMask(Ext.getBody(), {
cls: 'x-mask-msg custom-mask-msg',
msg: ' ',
msgCls: 'x-mask-loading custom-mask-loading'
});

myMask.show();

In this example I haven't actually used the custom-mask-msg class but for many customizations it would be necessary so I've included it. Use Firebug or the Chrome Developer Tools to inspect the elements on the page to figure out what CSS changes you need in your case.