1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    2
    Vote Rating
    0
    Achuthman is on a distinguished road

      0  

    Default Image Button creation

    Image Button creation


    Hi

    I am trying to create a button using Ext.Img for that I extended the Ext.Img as shown below:

    Ext.define('MyApp.ImageButton',{ extend: 'Ext.Img',
    alias: ['widget.ImageButton'],
    requires: ['Ext.Img'],
    onImage: '',
    offImage: '',
    constructor: function(offImage, onImage, w, h){
    this.callParent(arguments);
    this.src=offImage,
    this.onImage=onImage,
    this.offImage=offImage
    },
    Listeners: {
    el: {
    mouseover: function(e,o)
    {
    o.src=this.offImage
    },
    mouseout: function(e,o)
    {
    o.src=this.onImage
    }
    });

    But am getting a error saying this.inImage and this.offImage are null. How can I access these variables present inside this class from the event functions ?

  2. #2
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    17,151
    Vote Rating
    674
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      0  

    Default


    Several things:

    Code:
    Ext.define('MyApp.ImageButton', {
        extend: 'Ext.Img',
        alias: ['widget.imagebutton'],
        
        initComponent: function(){
            this.src = this.onImage;
            this.callParent(arguments);
            this.on({
                el: {
                    scope: this,
                    mouseover: this.onMouseOver,
                    mouseout: this.onMouseOut
                }
            });
        },
        
        onMouseOver: function(e, t){
            t.src = this.offImage;
        },
        
        onMouseOut: function(e, t){
            t.src = this.onImage;
        }
    });
    
    Ext.onReady(function(){
        new MyApp.ImageButton({
            renderTo: document.body,
            width: 100,
            height: 100,
            onImage: 'http://www.famfamfam.com/lab/icons/silk/icons/application_form.png',
            offImage: 'http://www.famfamfam.com/lab/icons/silk/icons/map.png'
        });
    });
    1) Try and follow the pattern for components, don't override the constructor to pass arguments, pass a config instead
    2) The requires is redundant, since extend implies a requirement
    3) aliases should be lower case
    4) We need to set a default image on the element
    5) You need to set the listener scope to be able to access the current instance
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  3. #3
    Sencha User
    Join Date
    Mar 2012
    Posts
    2
    Vote Rating
    0
    Achuthman is on a distinguished road

      0  

    Default


    Thanks a lot Evant. This really helped me.

Thread Participants: 1