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
    16,801
    Vote Rating
    605
    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

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi