Search code examples
extjsextjs6gravatar

Gravatar image doesn't render on Ext JS header. The block of code of Gravatar doesn't work


I use two classes for imaging of gravatar on the header : 'Foresto.ux.Gravatar', 'Foresto.views.account.Account'. And I wish to get it on the main header. But console throws it : ''Uncaught ReferenceError: hex_md5 is not defined''

I tried change approach for calling 'Foresto.views.account.Account'

Ext.define('Foresto.ux.Gravatar', {
    extend: 'Ext.Img',
    alias: 'widget.gravatarimg',
    gravatarUrl: '//www.gravatar.com/avatar/',
    imgCls: 'gravatar-img',
    email: '',
    gravatarParams: {
       default: 'identicon',
       size: 80
    },

    initialize: function() {
        this.src = this.getImageUrl(this.email);
        this.callParent();
    },

    getImageUrl: function(email){
        var url = this.gravatarUrl+hex_md5(email).toLowerCase();
        return Ext.urlAppend(url, Ext.Object.toQueryString(this.gravatarParams));
    },

    setEmail:function(email){
        this.setSrc(this.getImageUrl(email));
    }});

next class:

Ext.define('Foresto.view.account.Account', {
    extend: 'Foresto.ux.Gravatar',
    autoEl: 'div',
    xtype:'avatest',
    id: 'avatest',
    cls: 'account-control ol-control',
    gravatarParams: {
       default: 'retro',
       size: 36
    }
})

and gow I call it in Main.js:

header: {
        height: 65,
        items: user.login ? [{
            xtype:'avatest',

        },{
            xtype:'button',
            text: user.login ? 'up' : 'in',
            cls:'mainbuttons',
            handler: function() {
                user.login ? window.location.assign("/accounts/logout/") : Ext.Viewport.toggleMenu('right');
            }
        },{
            xtype:'button',
            text:'info',
            cls:'mainbuttons',
            margin: '0, 2 , 8, 0'
        }] : [{
            xtype:'button',
            text: user.login ? 'up' : 'in',
            cls:'mainbuttons',
            handler: function() {
                user.login ? window.location.assign("/accounts/logout/") : Ext.Viewport.toggleMenu('right');
            }
        },{
            xtype:'button',
            text:'О сервисе',
            cls:'mainbuttons',
            margin: '0, 2 , 8, 0'
        }],
        title : {
            text : 'MYAPP(pre-alpha)',
            cls: 'header-cls'
        },
    },


Solution

  • Just set src in the constructor before the Ext.Img instance is created.

    Sencha Fiddle