ext.panel not fitting in viewport

[olamalam]

Hi to all,

I have a border-layout viewport with 3 regions (north,center,west).
my center region does not fit from bottom and the top.
is this a css problem or should I set some property of ext.Panel?

thanks

 
var viewport = new Ext.Viewport({
            layout  : 'border',
            items   : [
                new Ext.BoxComponent({ // raw
                    region  : 'north',
                    el      : 'north',
                    height  : 80
                }),
 
            new Ext.Panel({
               title           : 'Navigation',
               id    : 'SearchByEntitiesPanel',
               region          : 'west',
               width           : 210,
               minSize         : 100,
               maxSize         : 400,
               collapsible     : true,
               margins         : '0 0 0 5',
               split           : true,
               contentEl       : 'west',
               layout   : 'border'
           }),
                new Ext.Panel({
                 id          : 'content-panel',
                    region      : 'center',
                    contentEl   : 'center',
                    title       : 'Main',
                    listeners   : {'bodyresize':onContentPanelResize},
                    autoScroll  : true
                })
             ]
        });

and

 
<div id="north">
            <a href="javascript:openWindow()" style="float:right;">
                <img src="${createLinkTo(dir: 'images', file: 'thomsonreuters_sml.gif')}"/>
            </a>
            <h1>Transactions Directory and Reporting System Administration Interface</h1>
            <div id="logininfo" style="margin-right:5px">
                <br><br>Welcome <g:loggedInUserInfo field="userRealName">Guest User</g:loggedInUserInfo> -
            <g:link class="create" controller="tdrsUser" action="changePassword" target="content-area">Change Password</g:link>
            -
                <a href="${createLinkTo(dir: 'logout')}">Logout</a>
            </div>
        </div>
        <div id="west">
        </div>
        <div id="center" style="height:100%">
            <table bgcolor=aqua width="100%" height="100%">
                <tr>
                    <td>
                        <IFRAME id="content-area" name="content-area" frameborder="2" width="100%">
                        </IFRAME>
                    </td>
                </tr>
            </table>
        </div>

not fitting panel.jpg

[Animal]

Use a ManagedIFramePanel

[olamalam]

ok, instade of Ext.Panel I put this to center:

 
    var content=new Ext.ux.ManagedIFrame ({
  autoCreate:{
   frameBorder: 0,
   cls:'x-panel-body',
   width: '100%',
   height: '100%',
            id          : 'content-panel',
            region      : 'center',
            contentEl   : 'center',
            title       : 'Main',
            listeners   : {'bodyresize':onContentPanelResize},
            autoScroll  : true
  }
 });

but now I have a javascript error at ext-all.js: object doesnt support this property or method

[Animal]

What's all this with contentEl?

Didn't you read up about how to use a ManagedIFramePanel. I think Doug has documented it, so since he's provided this excellent code free, show him the courtesy of making an effort.

[olamalam]

sorry, I've found the document, going to read it all...

[Animal]

OK good.

And for further readnig see

http://www.extjs.com/deploy/ext-3.0....=Ext.Container

and

http://www.extjs.com/deploy/ext-3.0....&member=layout