1. #1
    Sencha User
    Join Date
    Nov 2011
    Location
    Quanzhou City , Fujian Province, China
    Posts
    13
    Vote Rating
    0
    liduqun is on a distinguished road

      0  

    Default In chrome,the following program Layout incorrectly!

    In chrome,the following program Layout incorrectly!


    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?
    ----------------------------------------------------------------

    Code:
        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
            }
          ]
    
    
          });
    
    
    
    
    
    
    
    
        });
    Last edited by mitchellsimoens; 31 Mar 2012 at 8:44 AM. Reason: added [CODE] tags

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,327
    Vote Rating
    850
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Nov 2011
    Location
    Quanzhou City , Fujian Province, China
    Posts
    13
    Vote Rating
    0
    liduqun is on a distinguished road

      0  

    Default Chrome cannot display the imae correctly

    Chrome cannot display the imae correctly


    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!

  4. #4
    Sencha Premium Member skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,604
    Vote Rating
    325
    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


    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.

Thread Participants: 2

Tags for this Thread