FormPanel > Panel > IMG, ie7 error

[michaelr524]

Hello ExtJSers!

I've created a FormPanel and needed to embedd an IMG element in it (upload image preview).
So I did it like this:

var img_preview = document.createElement('img')
img_preview.width = 156
img_preview.width = 118
img_preview.src = 'http://www.tapuz.co.il/HP/images/wakingup.jpg'

var img_panel = new Ext.Panel({
	items:[new Ext.Element(img_preview)]
})

and put 'img_panel' in Ext.FormPanel's [items].
It works in firefox but gives me the following error in explorer 7:

Line: 15658
Error: Unexpected call to method or property access.

on this line:

this[name] = Ext.get(pnode.appendChild(el));

from

createElement : function(name, pnode){

[name == 'bwrap']
from

Ext.Panel = Ext.extend(Ext.Container, {

So, is this the right way to embedd an image in a FormPanel? What am I missing?
Thanks,
michael

[Condor]

Use:

var img_panel = new Ext.Panel({
  items:[{
    xtype: 'box',
    autoEl: {tag: 'img', height: 118, width: 156, src: 'http://www.tapuz.co.il/HP/images/wakingup.jpg'}
  }]
})

[michaelr524]

thanks Condor!!

[sirioz10]

Hi Condor,
I have similar problem, but I need to assign the image element to a variable so that I can change the image source later. My code now, is like the following:

this._window = new Ext.Window({
layout:'fit',
width:400,
height:200,
closeAction:'hide',
plain: true
});
var Img = new Ext.Element(document.createElement('img'));
this._window.add(Img);
Img.on('load',this.MyMethod,this);

....
Img.src = myvar;

But when I add the Img element I get same posted error (in IE7).

Some suggestion?

[Condor]

You can't add an Element to an Ext.Container (e.g. Ext.Window). You can only add Ext.Components.

Use:

this._window = new Ext.Window({
  layout:'fit',
  width:400,
  height:200,
  closeAction:'hide',
  plain: true
});
var img = new Ext.BoxComponent({
  autoEl: {tag: 'img', src: Ext.BLANK_IMAGE_URL},
  listeners: {
    render: function(c) {
      c.getEl().on('load', this.MyMethod, this);
    },
    scope: this
  }
});
this._window.add(img);
....
img.getEl().dom.src = myvar;

[sirioz10]

Thanks Condor,
this help me ;-)

[sonata82]

Thanks Condor, had the same problem in IE 8 using Ext 3.3.1 and defining the image as Ext.BoxComponent fixed it.