Results 1 to 7 of 7

Thread: FormPanel > Panel > IMG, ie7 error

  1. #1
    Ext User
    Join Date
    Feb 2008
    Posts
    2
    Vote Rating
    0
      0  

    Default FormPanel > Panel > IMG, ie7 error

    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:

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

    Code:
    this[name] = Ext.get(pnode.appendChild(el));
    from
    Code:
    createElement : function(name, pnode){
    [name == 'bwrap']
    from
    Code:
    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

  2. #2
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    119
      0  

    Default

    Use:

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

  3. #3
    Ext User
    Join Date
    Feb 2008
    Posts
    2
    Vote Rating
    0
      0  

    Default

    thanks Condor!!

  4. #4
    Sencha User
    Join Date
    Jan 2008
    Posts
    29
    Vote Rating
    0
      0  

    Default

    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?

  5. #5
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    119
      0  

    Default

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

    Use:

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

  6. #6
    Sencha User
    Join Date
    Jan 2008
    Posts
    29
    Vote Rating
    0
      0  

    Default

    Thanks Condor,
    this help me ;-)

  7. #7
    Sencha Premium Member sonata82's Avatar
    Join Date
    Aug 2011
    Posts
    20
    Vote Rating
    9
      0  

    Default

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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •