Image Button creation

[Achuthman]

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 ?

[evant]

Several things:

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

[Achuthman]

Thanks a lot Evant. This really helped me.