1. #1
    Sencha User kostysh's Avatar
    Join Date
    Nov 2011
    Location
    Odessa, Ukraine
    Posts
    176
    Vote Rating
    20
    kostysh will become famous soon enough kostysh will become famous soon enough

      0  

    Lightbulb Event 'load' with images not fire (ST2 Beta)

    Need help. Event onLoad for images not fires. Look thru code please, is it wrong code or I have found a error?

    Only 'load' event not fires, but 'tap', 'doubletap', 'swipe' works fine...

    Code:
    Ext.Loader.setConfig({enabled: true});
    
    Ext.application({
    name: 'Test',
    launch: function(){
        var viewport = Ext.create('Ext.Container', {
            fullscreen: true,
            layout: 'fit'
        });
    
        var image = Ext.create('Ext.Img', {
            src: 'http://.......yourUrl.....png'
        });
    
        image.element.on({
            scope: this,
           load: function() {console.log('onLoad works!');},//Not fires!
           tap: function() {console.log('onTap works!');},
           doubletap: function() {console.log('doubletap works!');},
           swipe: function() {console.log('swipe works!');}
        });
    
        viewport.add(image);}
    });

  2. #2
    Sencha - Senior Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    38,212
    Vote Rating
    1045
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default

    There isn't any load event that fires on the Ext.Img component, that much I think you have discovered. Ext.Img has two modes, 'background' and other with 'background' being the default. By default, 'background' mode will apply the CSS background-image on the <div> which you won't be able to list for the image loading. But if you change the mode config on Ext.Img to anything else it will create the <img> tag:

    Code:
    new Ext.Container({
        fullscreen : true,
        items      : [
            {
                xtype  : 'image',
                mode   : 'tag',
                src    : 'https://www.google.com/intl/en_com/images/srpr/logo3w.png',
                width  : 275,
                height : 95
            }
        ]
    });
    However this still won't fire a load event even if you drill down to the <img> tag. So time to play with the actual Ext.Img source. First, this is something that we want correct?

    Code:
    new Ext.Container({
        fullscreen : true,
        items      : [
            {
                xtype     : 'ux-image',
                src       : 'https://www.google.com/intl/en_com/images/srpr/logo3w.png',
                width     : 275,
                height    : 95,
                listeners : {
                    load : function() {
                        console.log('Image loaded!');
                    }
                }
            }
        ]
    });
    We can do this with this little extension:

    Code:
    Ext.define('Ext.ux.Img', {
        extend : 'Ext.Img',
        xtype  : 'ux-image',
    
        config : {
            mode : 'tag'
        },
    
        updateSrc : function() {
            var me  = this,
                img = me.imageElement;
    
            img.dom.onload = Ext.Function.bind(me.onLoad, me, [img], 0);
    
            me.callParent(arguments);
        },
    
        onLoad : function(el, e) {
            this.fireEvent('load', this, el, e);
        }
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha - Senior Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    38,212
    Vote Rating
    1045
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default

    Ok... so a quick thought... how to handle errors. Here is the new Ext.ux.Img:

    Code:
    Ext.define('Ext.ux.Img', {
        extend : 'Ext.Img',
        xtype  : 'ux-image',
    
        config : {
            mode : 'tag'
        },
    
        updateSrc : function() {
            var me  = this,
                img = me.imageElement,
                dom = img.dom;
    
            dom.onload  = Ext.Function.bind(me.onLoad, me, [img], 0);
            dom.onerror = Ext.Function.bind(me.onError, me, [img], 0);
    
            me.callParent(arguments);
        },
    
        onLoad : function(el, e) {
            this.fireEvent('load', this, el, e);
        },
    
        onError : function(el, e) {
            this.fireEvent('exception', this, el, e);
        }
    });
    And of course to produce the load error:

    Code:
    new Ext.Container({
        fullscreen : true,
        items      : [
            {
                xtype     : 'ux-image',
                src       : 'https://www.google.com/intl/en_com/images/srpr/logo3wabc.png', //url is invalid
                width     : 275,
                height    : 95,
                listeners : {
                    load : function() {
                        console.log('Image loaded!');
                    },
                    exception : function() {
                        console.warn('Image Failed!');
                    }
                }
            }
        ]
    });
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #4
    Sencha User kostysh's Avatar
    Join Date
    Nov 2011
    Location
    Odessa, Ukraine
    Posts
    176
    Vote Rating
    20
    kostysh will become famous soon enough kostysh will become famous soon enough

      0  

    Default

    Thank you very much! Thank you very much! I think this feature must be part of ST2, very useful feature

  5. #5
    Sencha - Senior Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    38,212
    Vote Rating
    1045
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default

    Next release you will find something
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  6. #6
    Sencha User
    Join Date
    Mar 2012
    Posts
    76
    Vote Rating
    0
    jop_008 is on a distinguished road

      0  

    Default Image size

    Hi,

    I have a carousel with pictures. The carousel is part of a panel. I can change the width and height of the picture using the mode tag.
    I want the size of the pictures the same size as their placeholder. I think I must use an onload event and make use of getwidth and getheight.
    Thanks for help

    John

  7. #7
    Sencha User
    Join Date
    Mar 2013
    Posts
    2
    Vote Rating
    0
    dzheyd@gmail.com is on a distinguished road

      0  

    Default

    Hi, I exact the have the same issue here. The thing i want to do is to show some default image in Ext.Img if image load have failed. I dynamically change image using image.setSrc() method.

    Solutions that you have mentioned above seems does not work with ExtJS version 4.1.2. Because there is no any "dom" and "imageElement" property of Ext.Img. And there is no any clues how to solve this in ext docs.

    Please help, and thanks in advance.

  8. #8
    Sencha - Senior Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    38,212
    Vote Rating
    1045
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default

    Quote Originally Posted by dzheyd@gmail.com View Post
    Solutions that you have mentioned above seems does not work with ExtJS version 4.1.2. Because there is no any "dom" and "imageElement" property of Ext.Img.
    This thread is in Sencha Touch 2 forum so anything posted here may or may not work in Ext JS 4. I'd suggest creating a thread in Ext JS 4 Q&A forum.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  9. #9
    Sencha User
    Join Date
    Mar 2013
    Posts
    2
    Vote Rating
    0
    dzheyd@gmail.com is on a distinguished road

      0  

    Default

    Sorry, I did not know this was Sencha Touch thread. Got here by google search link.