Grid in Border Layout problems

**steven** · 25 Mar 2007 8:44 PM

I am having problems with getting a grid to correctly resize within a border layout with a splitter. My application is quite complicated so I tried to create a test page but I am still having problems with it.

I have the following:

Code:

<div id="outer">
  <div id="top">
    <div id="grid-panel" style="overflow:hidden;position:absolute;">
      <div id="grid" style="overflow:hidden;"></div>
    </div>
  </div>
  <div id="bottom" style="background:red;"></div>
</div>

then javascript:

Code:

Ext.onReady(function(){
    var north = new Ext.ContentPanel('top'); 
    var center = new Ext.ContentPanel('bottom'); 
    var layout = new Ext.BorderLayout('outer', {     
        north: { split:true, initialSize: 200}, 
        center: {}}); 
    
    layout.add('north', north); 
    layout.add('center', center);     
    
    ...

    var grid = new Ext.grid.EditorGrid('grid', {
        ds: ds,
        cm: cm,
        enableColLock:false
    });
  
    var gridlayout = Ext.BorderLayout.create({
        center: {
            margins:{left:3,top:3,right:3,bottom:3},
            panels: [new Ext.GridPanel(grid)]
        }
    }, 'grid-panel');

    grid.render();

    ds.load();
});

I copied most of the code from various examples. I have also tried moving the border layout to the bottom and doing

Code:

var north = new Ext.NestedLayoutPanel(gridlayout); 
var center = new Ext.ContentPanel('bottom'); 
var layout = new Ext.BorderLayout('outer', {     
  north: { split:true, initialSize: 200}, 
  center: {}}); 
        
layout.add('north', north); 
layout.add('center', center);

The first one doesn't resize the grid properly and the second one does strange things when moving the splitter. Bits of panels seem to get out of place.

I would prefer fixing the first version as it will be easier to incorporate into my app. I have tried handling regionresized and calling grid.autoSize() but it doesn't seem to work.

Here is the complete code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Manage Accounts</title>
    
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="extjs/resources/css/ytheme-aero.css" />
    
    <script type="text/javascript" src="extjs/utilities.js"></script> 
    <script type="text/javascript" src="extjs/ext-yui-adapter.js"></script> 
    <script type="text/javascript" src="extjs/ext-all-debug.js"></script> 
    
    <script type="text/javascript">
Ext.onReady(function(){    
    
    var north = new Ext.ContentPanel('top'); 
    var center = new Ext.ContentPanel('bottom'); 
    var layout = new Ext.BorderLayout('outer', {     
        north: { split:true, initialSize: 200}, 
        center: {}}); 
        
    layout.add('north', north); 
    layout.add('center', center);         

    // shorthand alias
    var fm = Ext.form, Ed = Ext.grid.GridEditor;

    var cm = new Ext.grid.ColumnModel([
		{header: "Coach Name", width: 200, dataIndex: 'name', editor: new Ed(new fm.TextField({allowBlank: true}))},
		{header: "Coach Email", width: 200, dataIndex: 'email', editor: new Ed(new fm.TextField({allowBlank: true}))},
		{header: "Coach Password", width: 200, dataIndex: 'password', editor: new Ed(new fm.TextField({allowBlank: true}))},
		{header: "Assigned Clients", width: 170, dataIndex: 'assigned', editor: new Ed(new fm.TextField({allowBlank: true}))}
	]);

    // by default columns are sortable
    cm.defaultSortable = true;    

    var ds = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({url:"GetAccounts.aspx"}),
        reader: new Ext.data.ArrayReader({id: 0}, [
           {name: 'id'},
           {name: 'name'},
           {name: 'email'},
           {name: 'password'},
           {name: 'assigned'}
      ])
    });

    // create the editor grid
    var grid = new Ext.grid.EditorGrid('grid', {
        ds: ds,
        cm: cm,
        enableColLock:false
    });
  
    var layout = Ext.BorderLayout.create({
        center: {
            margins:{left:3,top:3,right:3,bottom:3},
            panels: [new Ext.GridPanel(grid)]
        }
    }, 'grid-panel');

    // render it
    grid.render();       

    // trigger the data store load
    ds.load();
});

</script>
</head>

<body>
    <form name="form1" method="post" action="ManageAccounts.aspx" id="form1">
    <div id="outer">
        <div id="top">
            <div id="grid-panel" style="overflow:hidden;position:absolute;height:100%;">
                <div id="grid" style="overflow:hidden;"></div>
            </div>
        </div>
        <div id="bottom" style="background:red;"></div>
    </div>
    </form>
</body>
</html>

**jack.slocum** · 26 Mar 2007 1:27 PM

Have you tried adding the GridPanel directly to "north" in the first layout? That will fix your issue.

**steven** · 26 Mar 2007 3:12 PM

I will give that a go but in my more complex screen I actually have a number of other controls in the "north" section. I will see if I can rearrange it all to work or I might have to post a more complicated example.

Is there a way to force the grid to properly layout within its panel? As I mentioned I tried autoSize() but it didn't do anything. (Even in my broken example the grid sizes properly when the browser is resized, it just fails when the splitter is moved.)

**JeffHowden** · 26 Mar 2007 3:50 PM

If the grid is to know anything about the panel it's in and the dimensions it must size to, it must be in a gridpanel or you'll have to manually hook up a bunch of event listeners and custom resizing logic yourself.

**steven** · 26 Mar 2007 3:53 PM

Originally Posted by JeffHowden

If the grid is to know anything about the panel it's in and the dimensions it must size to, it must be in a gridpanel or you'll have to manually hook up a bunch of event listeners and custom resizing logic yourself.

The grid is definitely in a gridpanel. The problem I am having is that the gridpanel is resizing correctly but the grid itself doesn't get resized.

**dfenwick** · 26 Mar 2007 6:04 PM

I don't mean to sound somewhat brash, but is there a specific reason you're overly complicating the layout? NestedLayoutPanel objects were added specifically for this type of thing. You can nest BorderLayout objects by using them. I have some 10 NestedLayoutPanel objects in my code.

In your code, you're creating 2 ContentPanel objects. Those objects are aligned north and south. You're then creating (on the fly) another BorderLayout object. The LayoutRegion has no idea how to lay it out because there's no region associated with it. What's happening is your north/south objects are splitting properly, but your GridPanel isn't associated with anything, so the layout engine is putting it in the parent container. Since there's no association with the outside container from inside the GridPanel, and since a ContentPanel doesn't have any managerial control over layout of the things in its content, the grid will never get resized.

You're nesting. North needs to be a NestedLayoutPanel, and inside north, you'll need to add your controls and GridPanel. You're trying to do something I **wish** was available, which is doing dynamic alignment (I already submitted an enhancement request for this). In a perfect world, we could just do a mainPanel.align('top', GridPanel) (yadda yadda yadda) and everything would automagically lay itself out. But that's not currently the case.

Your order of creation should be:

- Create main Borderlayout with a 'north' and 'south'
- Add ContentPanel for 'south'
- Create BorderLayout nested panel for grid with a 'center'
- Create grid
- Add GridPanel to your nested BorderLayout as 'center'
- Add NestedLayoutPanel as 'center' to your main BorderLayout

**steven** · 26 Mar 2007 8:49 PM

Hi dfenwick,

Thanks for that. I'll try again with your suggestions.

I had been trying to use NestedLayoutPanel etc, the problem is that the pages are being adapted from some older code that is generating some pages in a particular way which makes it harder than it should be. That and I've only just started using extjs so I am not up to speed on how everything should be done yet.

I was under the impression that "grid-panel" would be within "top" but I'll have another look at it all and see if I can figure it out or at least get closer and have some more specific questions.

Grid in Border Layout problems

Thread Tools

Search Thread

Display

Grid in Border Layout problems

Grid in Border Layout problems

Similar Threads

Don't want border of a layout region

Grid on a border layout

Diagram showing border layout and grid containment

Border Layout preferences

Border Layout Documentation