1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    172
    Answers
    7
    Vote Rating
    -10
    glafrance is infamous around these parts glafrance is infamous around these parts

      0  

    Default Answered: Ext.Img load detection

    Answered: Ext.Img load detection


    I need to add an Ext.Img to a container after it is done loading, as the image is not rendered correctly.

    This is the function I call to create the Ext.Img, but it doesn't work. Please help

    Code:
           loadImage: function (imagePath, imageContainer) {
                var imgContainer = Ext.getCmp(imageContainer);
                imgContainer.removeAll();
                alert('outside1');
                var img = Ext.create('Ext.Img', {
                    src: imagePath,
                    listeners: {
                        load: {
                            fn: function() {
                                alert('Loaded!');
                                imgContainer.add(img);
                            },
                            element: 'el'
                        }
                    }
                });
            }

  2. This code seems to fix it.

    Code:
    loadWhiteLabelImage: function (imagePath) {
        var loginImageContainer = Ext.getCmp('loginImageContainer');
        loginImageContainer.removeAll();
        var img = Ext.create('Ext.Img', {
            src: imagePath,
            listeners: {
                afterrender: function(){
                    var imgDom = this.getEl().dom;
                    imgDom.onload = function () {
                        loginImageContainer.update();
                    };
                }
            }
        });
        loginImageContainer.add(img);
    }

  3. #2
    Sencha User
    Join Date
    Jul 2012
    Location
    France
    Posts
    159
    Answers
    2
    Vote Rating
    3
    Elfayer is on a distinguished road

      0  

    Default


    Try something like :
    PHP Code:
    loadImage: function (imagePathimageContainer) {
                 var 
    img = new Ext.Img({srcimagePath});
                
    imageContainer.insert(0img);
                 }); 

    Maybe it'll work. (I didn't test it)

  4. #3
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,080
    Answers
    674
    Vote Rating
    467
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


    See if this will work:
    Code:
    var changingImage = Ext.create('Ext.Img', {
        src: 'http://www.sencha.com/img/20110215-feat-html5.png',
        renderTo: Ext.getBody(),
        
        listeners: {
            load: {
                element: 'el',
                fn: function () {
                console.log('Finished!');
                }
            },
            render: function () {
                console.log('Loading ...');
            }
        }    
    });‚Äč
    Scott.

  5. #4
    Sencha User
    Join Date
    Oct 2011
    Posts
    172
    Answers
    7
    Vote Rating
    -10
    glafrance is infamous around these parts glafrance is infamous around these parts

      0  

    Default


    Scott, when I run your code it seems the load listener is never called.

    That is the key point. I need to know when the load is done.

    How to know when the load is done for Ext.Img? Doesn't seem to have a load event fired.

  6. #5
    Sencha User
    Join Date
    Oct 2011
    Posts
    172
    Answers
    7
    Vote Rating
    -10
    glafrance is infamous around these parts glafrance is infamous around these parts

      0  

    Default


    Here is a sample app that shows the issue:

    Code:
    Ext.onReady( function (){            
        Ext.create('Ext.form.Panel', {
            title: 'Switch Icons',
            width: 250,
            height: 250,
            bodyPadding: 10,
            renderTo: Ext.getBody(),
            layout: {
                type: 'vbox'
            },
            items: [{
                xtype: 'container',
                layout: {
                    type: 'hbox'
                },
                width: 240,
                height: 100,
                items: [{
                    xtype: 'container',
                    width: 87,
                    cls: 'logoContainer',
                    items: [{
                        xtype: 'image',
                        id: 'logoImage'
                    }]
                }, {
                    xtype: 'label',
                    text: 'logo1.png',
                    padding: '0, 0, 10, 0'            
                }]
            }, {
                xtype: 'label',
                text: 'Select a logo to display',
                padding: '0, 0, 10, 0'
            }, {
                xtype: 'container',
                layout: {
                    type: 'hbox'
                },
                defaults: {
                    xtype: 'button',
                },
                width: 240,
                height: 30,
                items: [{
                    text: 'Icon One',
                    listeners: {
                        click: function () {
                            Ext.getCmp('logoImage').setSrc('logo1.png');
                        }
                    }
                }, {
                    text: 'Icon Two',
                    margin: '0, 0, 0, 5',
                    listeners: {
                        click: function () {
                            Ext.getCmp('logoImage').setSrc('logo2.png');
                        }
                    }
                }, {
                    text: 'Icon Three',
                    margin: '0, 0, 0, 5',
                    listeners: {
                        click: function () {
                            Ext.getCmp('logoImage').setSrc('logo3.png');
                        }
                    }                
                }]
            }]
        });
    });

  7. #6
    Sencha User
    Join Date
    Oct 2011
    Posts
    172
    Answers
    7
    Vote Rating
    -10
    glafrance is infamous around these parts glafrance is infamous around these parts

      0  

    Default


    Here are the icons to make it easier on you:

    logo1.pnglogo2.pnglogo3.png

  8. #7
    Sencha User
    Join Date
    Oct 2011
    Posts
    172
    Answers
    7
    Vote Rating
    -10
    glafrance is infamous around these parts glafrance is infamous around these parts

      0  

    Default


    This code seems to fix it.

    Code:
    loadWhiteLabelImage: function (imagePath) {
        var loginImageContainer = Ext.getCmp('loginImageContainer');
        loginImageContainer.removeAll();
        var img = Ext.create('Ext.Img', {
            src: imagePath,
            listeners: {
                afterrender: function(){
                    var imgDom = this.getEl().dom;
                    imgDom.onload = function () {
                        loginImageContainer.update();
                    };
                }
            }
        });
        loginImageContainer.add(img);
    }

Thread Participants: 2