Using layouts and viewports in ExtJS

In my introduction to this wonderful JavaScript framework, we talked about installing ExtJS and creating some simple message boxes and prompts. Today I want to focus on the "clothes" that good web applications wear - The Layout. Ext provides a very flexible way of creating a beautiful desktop-like environment, which fills 100% of your screen and gives the kind of a feeling you are actually browsing through your e-mails in Outlook.

If you have read my previous tutorial on Ext, you would know that before we do anything, we have to include the library in our document. Suppose that all the necessary files are in directory named extjs.

<--! this goes in the header of your document -->
<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" />
<script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="extjs/ext-all.js"></script>

No layout in Ext exists without a Viewport, so let's go ahead and create a new Viewport.

Ext.onReady(function(){
    Ext.BLANK_IMAGE_URL = 'path/to/your/blank/image/s.gif';
    Ext.QuickTips.init();
    var viewport = new Ext.Viewport({
        layout: "border",
        renderTo: Ext.getBody(),
        items: [{
            region: "north",
            xtype: 'panel',
            html: 'You can put header stuff here, like an image or something.'
        },{
            region: 'west',
            xtype: 'panel',
            split: true,
            collapsible: true,
            title: 'A Navigation Menu',
            width: 200,
            minSize: 150,
            html: 'I am the navigation menu for your application.
 You can collapse me by clicking on that arrow.'
        },{
            region: 'center',
            xtype: 'panel',
            html: 'Hi! You always have to have a center panel in your Viewport, or your layout will not be rendered correctly'
        },{
            region: 'east',
            xtype: 'panel',
            split: true,
            width: 200,
            html: 'I am on the right side of the screen'
        },{
            region: 'south',
            xtype: 'panel',
            html: 'Put footer stuff here'
        }]
    }); 
});

Now this is a very basic layout we have constructed. I think it is pretty self-explanatory. First thing we did is created a new Viewport. Then we gave it several panels - east, west, north, south and center. In order to build a Viewport, you have to specify the center region, or your layout will not be rendered correctly. Notice how all of our elements in the Viewport have an xtype: 'panel'. You could change them to any valid ExtJS xtype and get a tabpanel or an accordion for example. Another interesting thing is that you can specify a content element for your panel. Let's say we have this in the body of our page.

<div id="south-panel">Hello! I'm the <strong>south</strong> panel.</div>

Now let's go back in the JavaScript code and replace the config for our south panel with this:

{
    region: 'south',
    xtype: 'panel',
    contentEl: 'south-panel'
}

How easy was that? There's a very well explained layout tutorial on Saki's web page. If you liked what you saw here, I'd definitely recommend that you check them out.

Tagged as: tutorial, viewport, layout, javascript, extjs, web 2.0

Speak your mind ( 0 Comments)

If you liked the article and want to contribute to it, please feel free to leave your comment. HTML tags are not allowed, but you can use the following BBCode to enhance your message: [url] [quote] [code] [b] [i] [u] [color].