1. #1
    Sencha User
    Join Date
    Mar 2009
    Posts
    23
    Vote Rating
    0
    traxanos is on a distinguished road

      0  

    Post [Solved] ColumnLayout only Resize greater

    [Solved] ColumnLayout only Resize greater


    Ext version tested:
    • Ext 3.2.1
    • Ext 3.3 Beta


    Adapter used:
    • ext
    • jquery


    css used:
    • only default ext-all.css


    Browser versions tested against:
    • IE6 (failed)
    • IE7 (ok)
    • IE8 (ok)
    • FF3 (ok)


    Operating System:
    • Windows 7
    • WinXP Pro


    Description:
    • The ColumnLayout don't resize content samller, but greater


    Test Case:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="de">
    <head>
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
      <link href="./css/ext-all.css" media="screen" rel="stylesheet" type="text/css">
      <script type="text/javascript" src="http://extjs-public.googlecode.com/svn/tags/ext-2.2/release/adapter/ext/ext-base.js"></script>
      <script type="text/javascript" src="http://extjs-public.googlecode.com/svn/tags/ext-2.2/release/ext-all.js"></script>
    </head>
    
    <body>
    <script type="text/javascript">
      <!--
      var ffff = 0;
      Ext.onReady(function() {
    
        var viewport = new Ext.Viewport({
          layout: 'fit',
          border: false,
          items: [
            {
              border: true,
              title: 'Basisdaten',
              layout: 'fit',
              items: [
                {
                  border: true,
    
                  title: 'Title',
                  autoHeight: true,
                  layout: 'column',
                  items: [
                    {
                      columnWidth: 0.4,
                      html: 'test'
                    },
                    {
                      columnWidth: 0.4,
                      html: 'test'
                    }
                  ]
                }
              ]
            }
          ]
        });
    
      });
      //-->
    </script>
    </body>
    </html>
    Steps to reproduce the problem:
    • Resize frame bigger and the content will resize correct
    • Resize frame smaller and the content will not resize correct


    The result that was expected:
    • The content has the same width


    Debugging already done:
    • We asssue an calc bug in the onLayout and following


    Possible fix:
    • not provided

  2. #2
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,546
    Vote Rating
    64
    Animal is a jewel in the rough Animal is a jewel in the rough Animal is a jewel in the rough

      0  

    Default


    That's well overnested. But it does in fact work in Ext 3.*

  3. #3
    Sencha User
    Join Date
    Mar 2009
    Posts
    23
    Vote Rating
    0
    traxanos is on a distinguished road

      0  

    Default


    why it is overnested. at the moment its not possible to use column layout in panels!

    here a second normale usage:

    Code:
    <html lang="de">
    <head>
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
      <link href="http://dev.sencha.com/deploy/dev/resources/css/ext-all.css" media="screen" rel="stylesheet"
            type="text/css">
      <script type="text/javascript" src="http://dev.sencha.com/deploy/dev/adapter/ext/ext-base.js"></script>
      <script type="text/javascript" src="http://dev.sencha.com/deploy/dev/ext-all.js"></script>
    </head>
    
    <body>
    <script type="text/javascript">
      <!--
      Ext.onReady(function() {
    
        var viewport = new Ext.Viewport({
          layout: 'border',
          items: [
            {
              region: 'north',
              html: 'test',
              margins: "5 5 5 5",
              height: 50
            },
            {
              region: 'center',
              margins: "0 5 5 5",
              xtype: 'tabpanel',
              activeItem: 0,
              items: [
                {
                  title: 'Sample',
                  items: [
                    {
                      layout: 'column',
                      title: 'Options 1',
                      items: [
                        {
                          columnWidth: 0.5,
                          html: 'test'
                        },
                        {
                          columnWidth: 0.5,
                          html: 'test'
                        }
                      ]
                    },
                    {
                      layout: 'column',
                      title: 'Options 1',
                      items: [
                        {
                          columnWidth: 0.5,
                          html: 'test'
                        },
                        {
                          columnWidth: 0.5,
                          html: 'test'
                        }
                      ]
                    }
                  ]
    
    
                }
              ]
    
            }
          ]
    
        });
    
      });
      //-->
    </script>
    </body>
    </html>

  4. #4
    Sencha - Community Support Team Condor's Avatar
    Join Date
    Mar 2007
    Location
    The Netherlands
    Posts
    24,246
    Vote Rating
    97
    Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of Condor has much to be proud of

      0  

    Default


    Your example is missing a layout:
    Code:
    var viewport = new Ext.Viewport({
        layout: 'border',
        items: [{
            region: 'north',
            html: 'test',
            margins: "5 5 5 5",
            height: 50
        },
        {
            region: 'center',
            margins: "0 5 5 5",
            xtype: 'tabpanel',
            activeItem: 0,
            items: [{
                title: 'Sample',
                layout: 'anchor',
                items: [{
                    anchor: '100%',
                    layout: 'column',
                    title: 'Options 1',
                    items: [{
                        columnWidth: 0.5,
                        html: 'test'
                    },
                    {
                        columnWidth: 0.5,
                        html: 'test'
                    }]
                },
                {
                    anchor: '100%',
                    layout: 'column',
                    title: 'Options 1',
                    items: [{
                        columnWidth: 0.5,
                        html: 'test'
                    },
                    {
                        columnWidth: 0.5,
                        html: 'test'
                    }]
                }]
            }]
        }]
    });

  5. #5
    Sencha User
    Join Date
    Mar 2009
    Posts
    23
    Vote Rating
    0
    traxanos is on a distinguished road

      0  

    Default


    tanks a lot!!!! it works with anchor. i should discover by self, but all other browsers works so fine.

    big thank!

Similar Threads

  1. ColumnLayout only resizes on window resize
    By msnajdr in forum Ext 2.x: Help & Discussion
    Replies: 6
    Last Post: 27 Oct 2008, 1:11 AM
  2. IE7 - Portal/ColumnLayout resize Problem
    By jdarmetzki in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 9 Jun 2008, 4:40 AM

Thread Participants: 2

Tags for this Thread