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

      0  

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

    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 Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,704
    Vote Rating
    751
    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 Forum Manager
    ________________
    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 Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,704
    Vote Rating
    751
    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 Forum Manager
    ________________
    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
    171
    Vote Rating
    19
    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 Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,704
    Vote Rating
    751
    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 Forum Manager
    ________________
    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

    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 Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,704
    Vote Rating
    751
    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 Forum Manager
    ________________
    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.

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar