[Solved] ColumnLayout only Resize greater

**traxanos** · 4 Oct 2010 3:34 AM

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

**Animal** · 4 Oct 2010 4:14 AM

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

**traxanos** · 4 Oct 2010 5:12 AM

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>

**Condor** · 4 Oct 2010 5:21 AM

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'
                }]
            }]
        }]
    }]
});

**traxanos** · 4 Oct 2010 6:15 AM

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

big thank!

[Solved] ColumnLayout only Resize greater

Thread Tools

Search Thread

Display

[Solved] ColumnLayout only Resize greater

[Solved] ColumnLayout only Resize greater

Similar Threads

ColumnLayout only resizes on window resize

IE7 - Portal/ColumnLayout resize Problem

Tags for this Thread