In chrome,the following program Layout incorrectly!

[liduqun]

The following program wants to show a panel with 6 icons ,which layout in 2*3.
In IE ,it works correctly.
But in google chrome , it don't work as in ie.
Is anything deferent about Layout in IE and chrome?
----------------------------------------------------------------

    Ext.require('Ext.Img');


    Ext.onReady(function ()
    {
      var widthFlex = 200;
      var heightFlex = 200;


      var item = function (itemId)
      {
        switch (itemId)
        {
          case 'btnCreate':
            text = 'Create';
            break;
          case 'btnSubmit':
            text = 'Submit';
            break;
          case 'btnTrack':
            text = 'Track';
            break;
          case 'btnQuery':
            text = 'Query';
            break;
          case 'btnLstBrs':
            text = 'Lastest';
            break;
          case 'btnChgPwd':
            text = 'Password';
            break;
        }
        return {
          xtype: 'panel',
          frame: true,
          layout: 'fit',
          width: 'auto',
          height: 'auto',
          items: {
            xtype: 'image',
            width: 'auto',
            height: 'auto',
            src: "test.png"//50*50 transparent png file
          },
          bodyStyle: 'padding:10px',
          flex: widthFlex,
          buttons: [{
            text: text,
            pressed: true,
            itemId: itemId
          }],
          buttonAlign: 'center'


        }
      }


      Ext.create("Ext.panel.Panel", {
        renderTo: Ext.getBody(),
        width: 500,
        height: 500,


        layout: {
          type: 'vbox',
          align: 'stretch'
        },
        title: "",
        items: [
        {
          xtype: 'container',
          flex: 100
        },
        {
          xtype: 'fieldcontainer',
          flex: heightFlex,
          layout: {
            type: 'hbox',
            align: 'stretch '
          },
          items: [
          {
            xtype: 'container',
            flex: 100
          },
          item('btnCreate')
          ,
          {
            xtype: 'container',
            flex: 100
          },
          item('btnSubmit')
          ,
          {
            xtype: 'container',
            flex: 100
          },
          item('btnTrack')
          ,
          {
            xtype: 'container',
            flex: 100
          }


        ]
        },
        {
          xtype: 'container',
          flex: 100
        },
        {
          xtype: 'fieldcontainer',
          flex: heightFlex,
          layout: {
            type: 'hbox',
            align: 'stretch '
          },
          items: [
          {
            xtype: 'container',
            flex: 100
          },
          item('btnQuery')
          ,
          {
            xtype: 'container',
            flex: 100
          },
          item('btnLstBrs')
          ,
          {
            xtype: 'container',
            flex: 100
          },
          item('btnChgPwd')
          ,
          {
            xtype: 'container',
            flex: 100
          }


        ]
        },
        {
          xtype: 'container',
          flex: 100
        }
      ]


      });








    });

[mitchellsimoens]

This is what I get with Chrome. It displays fine minus not having the image but the layout looks correct on 4.0.7 and 4.1.0 RC1

Screen Shot 2012-03-31 at 11.45.11 AM.png

[liduqun]

Here is what IE display:IE_result.png
and here is what Chrome display:
Chrome_result.png
Chrome can not display the image correctly (like IE)!
But after the panel rendered,I hide the panel and show it after sometime , it will display correctly, like IE.
I thank, maybe it's because the chrome is really multi-thread,and IE is not.
What should I do to avoid the deference between IE and Chrome?
Thanks!

[skirtle]

The usual problem with layouts that rely on images is that the JavaScript runs before the image is loaded, at which time it has zero width and height. Try giving the images a fixed size, at least for diagnostic purposes. If that isn't practical for your real app then you'll need to pre-load the images before trying to lay them out.