I had been struggling with how to keep my page elements constrained within the borders of my application’s page design dynamically. I knew about ExtJS’s Viewport object, but all the docs and examples I read showed that it took up the entire viewing area of the DOM.

Therefore, many of my application’s views had the elements at a hard-coded height based on the typical user profile – 600px.

A little while back, I saw someone’s example site (I can’t remember the site now, so I’m sorry for lack of attribution) using Viewport with a custom site header, and a world of opportunity opened up for me.

Basically, the Viewport was using the border layout and the site header was occupying the north region using the applyTo configuration option. Then, the center region was used to display the objects (panels, grid, lists, etc.) within that view.

Here’s a very simplistic snippet from my application:

<body>
   <div id="HeaderCap">
      <div id="headerCapLeft"><img src="images/small_logo.png" /></div>
      <div id="headerCapRight">Steve Brownlee | < a href="index.cfm?logout=true">Log Out</div>
   </div>

   <div id="Toolbar"></div>

   <div id="Content"></div>
</body>

I have an application header in an element with the id of HeaderCap, then I have a Toolbar element where my Ext.Toolbar object is rendered, then a separate element with an id of Content where the actual view is rendered.

Also, each view has a title occupying, approximately, the top 100 pixels. I had to account for that as well so that the center region of the Viewport didn’t render over that element. Simply by using margins on the center region, allowed me to show the view’s other content.

Again, a simplified version of my Viewport. You see that the north region is applied to the existing HeaderCap markup, and the center region has margins of 100 30 30 30. This allows the view’s title (and other related information) to be displayed along with the Grid and Form elements I’m adding to the layout.

new Ext.Viewport({
    layout: 'border',
    style: 'background: #fff; text-align:left;',
    items: [{
        xtype: 'box',
        region: 'north',
        applyTo: 'HeaderCap',
        height: 30
    },{
        layout  : 'fit',
        region  :'center',
        border  : false,
        split   : false,
        margins : '100 30 30 30',
        items   : [Grid,Form]
    }],
    renderTo: Ext.getBody()
});