Windows, Fit, etc

[RobWilson]

I am going round in circles trying to do something easy with layouts within a window.

If I create a window with layout 'fit' and set its config item to be a single BoxComponent that contains an elementEl to an existing div, would you usually expect that div to take up all of the space?

extWindow = new Ext.Window({
            layout      : 'fit',
            items       : new Ext.BoxComponent({
                el: Ext.get("myDiv")
            }),
            autoScroll : true,
            autoHeight : false
        });

Due to integrating with legacy web-client code, I used this technique to rip out existing elements and insert them into a window.

However, more recently I want to add some new Ext components into that window - but much later in the lifecycle. If you assume I have some div structure like this...

<div id="myDiv">              ##1
   <div id="myFormDiv">     ##2
      ... stuff ...
   </div>
   <div id="myNewPanelToGoHere">  ##3
   </div>
</div>

##1 = The Ext Window was originally created with this as the only item and worked fine
##2 = This is the form I want to re-use in the north part of my new border layout grid
##3 = This is what I want to display in the center region of the grid

Unfortunately the grid does not display unless I set a specific size, I must get it so that it takes up all of the space within the window. Is this because the original boxComponent created with the initial window is preventing the auto-size from working? Or am I miss-configuring the panel with the border layout?

Any help would be appreciated - it's turning out to be a head scratcher.

Here's a small section of the code to give you some idea.

        var myPanel = new Ext.Panel( {
            layout: 'border',
            renderTo: 'myNewPanelToGoHere', // <-- works if width and height is specified
            //width: 500,
            //height: 500,
            items: [
                new Ext.BoxComponent({
                    el: Ext.get('myFormDiv'),
                    region: 'north'
                }),
                new Ext.grid.GridPanel({
                    store: quoteDataStore,
                    region:'center',
                    width:500,
                    height: 300,
                    visible:true,
                    columns: [
                        {header: "Id", width: 80, dataIndex: 'quoteId', sortable: true},
                    ]
                })
            ]
        });

I know it seems odd to point the Ext window to a div and then try to rip out bits afterwards into another component that will be left remaining in the div - should it work though?

If not, can I use other window methods to replace the entire contents of the window on the fly - without loosing the contents of 'MyFormDiv' in the process?

My only other option is to change the way that creates all of the windows - but that is the last thing I want to do right now.

Thanks,
Rob.

[Animal]

You want a north/south split? Use a border layout in the Window.

[RobWilson]

Thanks Animal,

I knew that I ideally wanted border layout directly inside the window, and yes, that works. Thanks.

My original problem was to try and leave the existing Window infrastructure that was generically created with 'fit' layout, with the contents from an existing div, but then to rip out part of that into a new panel with border layout embedded inside the window.

It didn't work, and I wasn't sure whether I was fighting my own bug, or whether what I was trying to achieve would never work in ExtJS.

Any thoughts would be appreciated.

Thanks,
Rob.