LoadMask image - extjs

extjs4, image, load, mask

Solution

You can change loading icon by appliing css rules to loadMask Element (see loadingCls config):

Ext.create('Ext.view.View', {
    loadingCls: 'custom-loader'
    // ...
});

/* CSS */
.x-mask-msg .custom-loader {
    background-image: url(http://example.com/custom-loading.gif);
}

Check out a demo.

UPDATE

This doesn't work anymore with extjs 4.2. Checkout the new version. Any idea how to fix this?

This is strange but sencha doesn't provide api (at least I didn't find one) for changing loadMask icon. So the only option is to fiddle with css again:

/* CSS */
.x-mask-msg .custom-loader .x-mask-msg-text {
    background-image: url(http://example.com/custom-loading.gif);
}

ExtJs4.2 demo.

Problem

I have used mask on loading in my view. Right now it is showing me default loading image (x-mask-loading) I want to add my own image instead of that default image. Can anybody having some idea? Please let me know.

Original source