Results 1 to 5 of 5

Thread: [Solved] ColumnLayout only Resize greater

  1. #1
    Sencha User
    Join Date
    Mar 2009
    Posts
    23
    Vote Rating
    0
      0  

    Post [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,615
    Vote Rating
    54
      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
      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
    119
      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
      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

Tags for this Thread

Posting Permissions

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