Ext.js – Simple Layout

This is a simple teaching how to make a simple layout using Ext.js and prototype.js libraries.

Ext.js allows you to create very dynamic layouts using JS. It allows 5 basic containers which can be nested into each other to make even more complex layouts. These 5 basic containers are –

  • North
  • South
  • East
  • West
  • Center

To start building your layout you first need to make a new Hash Table that would contain the containers that you requires and the also there properties.

An example of a layout has table would be –
var layout = new Ext.BorderLayout(document.body, {
     north: {
          initialSize: 32,
          titlebar: false
     west: {
          initialSize: 200,
          minSize: 175,
          maxSize: 400,
          titlebar: true,
          collapsible: true,
          animate: true
     east: {
          initialSize: 202,
          minSize: 175,
          maxSize: 400,
          titlebar: true,
          collapsible: true,
          animate: true
     south: {
          initialSize: 100,
          minSize: 100,
          maxSize: 200,
          titlebar: true,
          collapsible: true,
          animate: true
     center: {
          titlebar: true,
          closeOnTab: true

Now you need to create some “ContentPanel” objects of ext.js and you will need to link them up to the DIV’s that actually contain the information. Then you will “add()” to your original “layout” hash table so that your layout can be made. This is what you will need to write –

layout.add('north', new Ext.ContentPanel('north', 'North'));
layout.add('south', new Ext.ContentPanel('south', {title: 'South', closable: true}));
layout.add('west', new Ext.ContentPanel('west', {title: 'West'}));
layout.add('east', new Ext.ContentPanel(Ext.id(), {autoCreate:true, title: 'Dynamic Tab', closable: true}));
layout.add('east', new Ext.ContentPanel('autoTabs', {title: 'Auto Tabs', closable: true}));
layout.add('center', new Ext.ContentPanel('center1', {title: 'Close Me', closable: true}));
layout.add('center', new Ext.ContentPanel('center2', {title: 'Center Panel', closable: false}));

Now you just need to make the DIV’s with names like “north” and “west” and ext will do the rest. It is all in the naming convention. You just need to write this small piece of code and then make your DIVs with the correct names. You are done! Congratulations!


5 Responses to “Ext.js – Simple Layout”

  1. November 14, 2007 at 12:55 pm

    Example of what you’ve done would be nice… Keep up the good work!

  2. July 15, 2008 at 9:31 am

    Could you please add a screenshot ?
    Good work!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

About Me

Hi - I am Prateek Saxena I am 15 years old and I am freelance web designer / developer and I love JavaScript. I am currently working on some of my own projects about which you will find out soon. You can email me or IM me through Yahoo Messenger (prateek.saxena).

Threadless Submissions

My Threadless.com Submission

%d bloggers like this: