Success! Looks like we've fixed this one. According to our records the fix was applied for TOUCH-1214 in a recent build.
  1. #1
    Sencha User
    Join Date
    Apr 2008
    Posts
    17
    Vote Rating
    1
    minorbug is on a distinguished road

      0  

    Default Image in PR3: cannot set width or height

    Image in PR3: cannot set width or height


    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.

    Code:
    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'
    					}
    					
    				]
    			}
    		]
        }
    });

  2. #2
    Sencha - Sencha Touch Dev Team rdougan's Avatar
    Join Date
    Oct 2008
    Posts
    1,158
    Vote Rating
    6
    rdougan will become famous soon enough

      0  

    Default


    Thanks for the report.
    Sencha Inc.
    Robert Dougan - @rdougan
    Sencha Touch 2 and Ext JS 4 Core Team Member, SASS/Theming Wizard.

  3. #3
    Sencha - Services Team AndreaCammarata's Avatar
    Join Date
    Jun 2009
    Posts
    1,394
    Vote Rating
    22
    AndreaCammarata has a spectacular aura about AndreaCammarata has a spectacular aura about

      0  

    Default


    Quote Originally Posted by minorbug View Post
    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.

    Code:
    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:

    Code:
    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.
    Sencha Inc
    Andrea Cammarata, Solutions Engineer
    CEO at SIMACS

    @AndreaCammarata
    www.andreacammarata.com
    github: https://github.com/AndreaCammarata

    TUX components bundle for Sencha Touch 2.x.x
    http://www.tux-components.com/


  4. #4
    Sencha User Jamie Avins's Avatar
    Join Date
    Mar 2007
    Location
    Redwood City, California
    Posts
    3,661
    Vote Rating
    20
    Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough Jamie Avins is a jewel in the rough

      0  

    Default


    This has been fixed for the next release.

    Sencha Inc

    Jamie Avins

    @jamieavins