ExtJS 4: Show LoadMask when img component load the large image

1
votes

I need to show "Loading image..." mask during update src property of Img component by click button.

This code not show load mask:

certImg.setLoading('Loading image...');
certImg.setSrc('load_image.php?file_name=' + record.get('invoice_item_file'));
certImg.setLoading(false);

And this code show, but don't hide load mask (it shown over updated image):

certImg.setLoading('Loading image...');
certImg.setSrc('load_image.php?file_name=' + record.get('invoice_item_file'));

I try to increase image size up to 1-2 Mb, this made load it 3-4 sec, but load mask still not showing... I also tried put certImg.setLoading(false) to afterrender Img event, the result was the same.

And when commented "certImg.setLoading(false);" - img is updated, but loadmask still shown over img...

2
extjs

2 Answers

0
votes

Can you check your code? It is working for me.. See Example here. 

var isResized = false;
var changingImage = Ext.create('Ext.Img', {
    src: 'http://www.sencha.com/img/20110215-feat-html5.png',
    resizable:true,
    listeners: {
    render: function (me) {
        me.el.on({
            load: function (evt, ele, opts) {
                  me.setLoading('Loading Mask Tested');
            }
            });
        },
        resize:function(me) {
            alert("resized");
            if(isResized) {
                alert("second time");
             me.setSrc('http://www.sencha.com/img/20110215-feat-perf.png');   
            } else {
                isResized= true;         
            }

        },

      afterrender: function (me) {
        me.el.on({
            load: function (evt, ele, opts) {
                  alert("rendered");
                  me.setLoading(false);
            }
            });
        }
    }
    //height:200,
    //renderTo: Ext.getBody()
}).render(Ext.getBody());

​

0
votes

Interesting case... I just added alert into my code and see the same result.

certImg.setLoading('Loading image...');
certImg.setSrc('load_image.php?file_name=' + record.get('invoice_item_file'));
alert('now it loading...');
certImg.setLoading(false);

But in your code if you using large image (like 3-4 Mb), you truly can't see loading mask while image is loading. It seems, as loading mask show AFTER loading complete wery quickly, and if we not use alert to pause it shown - we not see it.

I just try to change my code in you manners but take the same result - if remove alert than load mask dod not show...

Sencha do not provide any samples for this situation, may be it not implemented in this framework.

You must try experimenting with downloading large image without using alert to see this phenomenon.