1. #1
    Sencha User
    Join Date
    May 2011
    Posts
    21
    Vote Rating
    0
    raghavan0208 is on a distinguished road

      0  

    Default Unanswered: image component in extjs

    Unanswered: image component in extjs


    Hi all,

    I am using the Ext.Img component. Everything is fine untill i am trying to align using the X and Y coordinates in the panel. It is aligning correctly in chrome and FF3.6. But not in IE8.


    I don't know why, anyone faced similar kind of problems.

  2. #2
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,592
    Answers
    541
    Vote Rating
    324
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Do you see the same problem if you use a different component, rather than an Ext.Img?

    Could you post a short test case to demonstrate the problem?

  3. #3
    Sencha User
    Join Date
    May 2011
    Posts
    21
    Vote Rating
    0
    raghavan0208 is on a distinguished road

      0  

    Default


    Sure, At first i tried to move the component by mentioning the X and Y position just like in below,

    var changingImage = Ext.create('Ext.Img', {
    src: 'http://www.sencha.com/img/20110215-feat-html5.png',
    x:60,
    y:60,
    renderTo: Ext.getBody()
    });


    but nothing happens in all of the browsers, then i embed the Ext.img in a panel and tried to move the panel , just like this

    Ext.onReady(function(){


    var changingImage = Ext.create('Ext.Img', {
    src: 'http://www.sencha.com/img/20110215-feat-html5.png'

    // renderTo: Ext.getBody()
    });



    var panel=Ext.create('Ext.panel.Panel', {
    height:200,
    width:200,
    layout:'box',
    header:false,
    //html:"Try 1",
    x:450,
    y:40,
    items:[changingImage],
    renderTo: Ext.getBody()
    });

    });



    it worked fine on FF4.0.1, chrome but in IE8 the panel is not moving according to the corresponding X and Y position.

    At the same time if use other components inside a panel and move it . Things are fine in all of the browsers

    Do u think if there is a way to acheive what i am looking for

  4. #4
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,592
    Answers
    541
    Vote Rating
    324
    skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future skirtle has a brilliant future

      0  

    Default


    Please use CODE tags when posting code (# button on the editor toolbar).

    OK, think I can explain this.

    In your initial example the top and left CSS properties are set correctly but the img element still has position set to static, so they won't do anything. You'd need to set it to absolute or relative positioning. The easiest way to that is through the cls config option.

    As for your second example, with the panel, the problem is your choice of layout. Box layout isn't intended to be used directly like that. If you just get rid of the layout, or pick a suitable layout, it'll work fine.

    You also don't need the header: false.

Thread Participants: 1

Tags for this Thread