Problem with a 100% grid container width and window resize

**doc** · 31 Jul 2007 4:33 AM

Here's a problem or at least a misbehavior I encountered when playing around with a grid which is rendered intto a container of 100% window width.
The container size is known at rendering time, but when the window gets *resized*, the grid doesn't resize its content - but it should, cause the container dimensions are known after window resize and the monitorWindowResize flag is set.

I've read the limits and docu well:
* The container MUST have some type of size defined for the grid to fill.

- Actually the size is rendered correctly the frist time, the container width is defined by the window width.

Is this behavior correct?

Other improvement: It should be possible to set the column width in percent (of the container width).
The container width is known, so the column width can be calculated.

Regards,

Marco

Here's the simple test code (based on the grid examples):

Code:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>100% Grid Test</title>

<script type="text/javascript" src="../../adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-all-debug.js"></script>
<script type="text/javascript" src="../../package/util.js"></script>
<link rel="stylesheet" type="text/css" href="../../resources/css/reset-min.css" />
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

</head>
<body>
<p>This example sets the container to 100% window width. The grid should resize
if the window is resized, all dimensions of the grid are known:</p>

<div id="test" style="border: 1px solid #00B; margin:10px;">
	Small test container for 100% window width.
</div>
<br />
<div id="container" style="border: 1px solid #00B; margin:10px;">
	<div id="grid"></div>
</div>

<script type="text/javascript">

var Example = {
    init : function(){
        // some test data
        var myData = [
			['blue', 'fix', 'dog'],
			['red', 'var', 'cat'],
			['gray', 'fix', 'bird'],
			['yellow', 'var', 'big bird']
		];

        var ds = new Ext.data.Store({
		        proxy: new Ext.data.MemoryProxy(myData),
		        reader: new Ext.data.ArrayReader({}, [
                       {name: 'color'},
                       {name: 'type'},
                       {name: 'animal'}
                 ])
        });
        ds.load();

        // simple colum model
        var colModel = new Ext.grid.ColumnModel([
			{id: 'color', header:"Color", width: 160, dataIndex: 'color'},
			{id: 'type', header: "Type", width: 75, dataIndex: 'type'},
			{id: 'animal', header: "Animal", width: 75, dataIndex: 'animal'}
		]);

        // create the Grid
        var grid = new Ext.grid.Grid('grid', {
            ds: ds,
            cm: colModel,
            monitorWindowResize: true,
            autoExpandColumn: 'animal'
        });

        grid.render();
        grid.getSelectionModel().selectFirstRow();
    }
};
Ext.onReady(Example.init, Example);

</script>
</body>
</html>

Tested with Ext1.1RC1 / IE7, FF2, OP9

**jack.slocum** · 31 Jul 2007 5:51 AM

Using percentage widths on the grid container (or any container) is not supported. As the docs say, a size must be defined.

Some people have had success implementing percentage widths. I would post to the help forum and maybe someone will share their solution.

**acharis** · 2 Aug 2007 2:19 AM

If you specifically specify a BorderLayout for the gridpanel it seems to allow a 100% width. Even 100% height.

HTML Code:

<div id="grid-panel" style="width:100%;height:100%;">
<div id="grid-example"></div>
</div>

Code:

        var grid = new Ext.grid.Grid('grid-example', {
            ds: ds,
            cm: colModel,
            autoExpandColumn: 'company'
        });
        
        var layout = Ext.BorderLayout.create({
            center: {
                margins:{left:3,top:3,right:3,bottom:3},
                panels: [new Ext.GridPanel(grid)]
            }
        }, 'grid-panel');

        grid.render();

Seems to do the trick, on my end, even on the resize. It works best with the autoExpandColumn. You can also add a spacer column if need be, if most of your columns are fixed.

**Hutch** · 16 Aug 2007 3:17 AM

Oh! Is cool~

**rmsweeter** · 29 Aug 2007 1:36 PM

Is there any intent to add this percentage functionality in the near future?

I've tried to use Archaris' solution but it doesn't seem to be working correctly within a ContentPanel. I'm currently in charge of R&D for a company and this issue makes extjs hard to sell to the management around here.

**SeanBlader** · 15 Nov 2007 11:53 AM

I'm with the other posters, a capacity for relative width is definitely needed. I've found that using Ext.Panel as the layout I can get it to scale to 100% in Firefox 2 and IE7, but IE6 really breaks the formatting and the size of each column ends up being like 250% of the browser's width.

**Steve Micallef** · 10 Mar 2008 2:54 AM

I would have to agree with the other posters. I'm new to ext and this has so far been a major stumbling block.

Problem with a 100% grid container width and window resize

Thread Tools

Search Thread

Display

Problem with a 100% grid container width and window resize

Problem with a 100% grid container width and window resize

Seem to get it to work using a BorderLayout

Seem to get it to work using a BorderLayout

% scaling needed

% scaling needed