SetSrc doen´t work

Question

                    {                           
                        xtype: 'filefield',
                        x: 120,
                        y: 130,
                        width: 490,
                        //buttonOnly: true,
                        name: 'rutas',
                        itemId: 'rutas',
                        labelWidth: 90,                                                       
                        fieldLabel: 'Buscar Foto',  
                        listeners: {
                        'change': function (newVal) {
                            var file = newVal.fileInputEl.el.dom.files[0];
                            var reader = new FileReader();
                            console.log(reader);
                            reader.readAsDataURL(file);
                            reader.onload = function (evt) {
                                var image = Ext.getCmp("imageid");
                                image.setSrc(evt.target.result);
                            }
                        }                
                    }
                    },

                    {
                        xtype: 'image',
                        x: 20,
                        y: 5,
                        itemId: 'imageid',
                        style: "border: 1px solid black",
                        minHeight: 90,
                        width: 65,
                        height: 'auto',
                        //src: 'img/trabajador.jpg'                            
                    },

Hello, I am using this code to preview an image after selected but I got this:

Uncaught TypeError: Cannot read property 'setSrc' of undefined at FileReader.reader.onload (FdatosTrabajador.js?_dc=1519840212167:405).

Any idea about how to solve this issue ?

Answer 1

Change following line

var image = Ext.getCmp("imageid");

to

var image = Ext.ComponentQuery.query("[itemId=imageid]")[0];

Example Fiddle: https://fiddle.sencha.com/#view/editor&fiddle/2ds8