Image in PR3: cannot set width or height

[minorbug]

I have a login panel with a logo that loaded correctly in PR2. When I load it using PR3, I get:

Uncaught TypeError: Cannot call method 'setWidth' of undefined. (all-debug line 38922)

If I replace the width and height for the image panel with "flex:1" then the page and the image panel renders, but with zero width.

Ext.define('VUMobile.view.Home', {
    extend: 'Ext.form.Panel',
    xtype: 'homepanel',
    id:'loginForm',
    config: {
        title: 'Account',
        padding:12,
        iconCls: 'home',
        cls: 'home',
		layout:{
			type:'vbox',
			align:'middle'
		},
        items:[
			{
				xtype: 'image',
                                src: 'js/mobile/resources/images/logo.png',
                                
                                
                                width:300,
                                 height:124
                                
				
			},
			{
				xtype:'panel',
				flex:1,
				items:[
				{
					xtype:'fieldset',
					title:'Login',
                                        id:'loginFieldSet',
					items:[{
						xtype:'textfield',
						name:'username',
						label:'Username',
                                                value:(localStorage.getItem("VUMobile.username") || ""),
                                                labelWidth:'40%'
					},{
						xtype:'passwordfield',
						name:'password',
						label:'Password',
                                                labelWidth:'40%'
					}]
				},	{
						xtype: 'button',
						ui: 'confirm',
						text: 'Log in',
						action: 'loginUser'
					}
					
				]
			}
		]
    }
});

[rdougan]

Thanks for the report.

[AndreaCammarata]

I have a login panel with a logo that loaded correctly in PR2. When I load it using PR3, I get:

Uncaught TypeError: Cannot call method 'setWidth' of undefined. (all-debug line 38922)

If I replace the width and height for the image panel with "flex:1" then the page and the image panel renders, but with zero width.

Ext.define('VUMobile.view.Home', {
    extend: 'Ext.form.Panel',
    xtype: 'homepanel',
    id:'loginForm',
    config: {
        title: 'Account',
        padding:12,
        iconCls: 'home',
        cls: 'home',
        layout:{
            type:'vbox',
            align:'middle'
        },
        items:[
            {
                xtype: 'image',
                                src: 'js/mobile/resources/images/logo.png',
                                
                                
                                width:300,
                                 height:124
                                
                
            },
            {
                xtype:'panel',
                flex:1,
                items:[
                {
                    xtype:'fieldset',
                    title:'Login',
                                        id:'loginFieldSet',
                    items:[{
                        xtype:'textfield',
                        name:'username',
                        label:'Username',
                                                value:(localStorage.getItem("VUMobile.username") || ""),
                                                labelWidth:'40%'
                    },{
                        xtype:'passwordfield',
                        name:'password',
                        label:'Password',
                                                labelWidth:'40%'
                    }]
                },    {
                        xtype: 'button',
                        ui: 'confirm',
                        text: 'Log in',
                        action: 'loginUser'
                    }
                    
                ]
            }
        ]
    }
});

Hi, thank you for report this.
Waiting for an official fix for this issue, I suggest you to override the Ext.Img component as follow:

Ext.Img.override({
    
    doSetWidth: function(width) {
        if (this.getMode() === 'background') {
        this.element.dom.style.width = width + 'px';
           }else{
        this.imageElement.setWidth(width);
           }
    },


    doSetHeight: function(height) {
        if (this.getMode() === 'background') {
        this.element.dom.style.height = height + 'px';
        }else{
        this.imageElement.setHeight(height);
    }
    },
 
    destroy: function() {   
         if(this.imageElement){
            this.imageElement.destroy();
        }
        this.callParent();
    }

});

This will allow you to use the Img component inside your application.
Hope this helps.

[Jamie Avins]

This has been fixed for the next release.