This tutorial will explain how to create a layout commonly used in the backend of a website CMS. We will be using the Ext JS library and normal HTML and CSS.

So whats this Ext JS then?

Ext JS is a cross-browser JavaScript library for building rich internet applications. It includes:

  • High performance, customizable UI widgets
  • Well designed and extensible Component model
  • An intuitive, easy to use API
  • Commercial and Open Source licenses available

Ext JS supports all major web browsers including Internet Explorer 6+, FireFox 1.5+, Safari 3+ and Opera 9+. I would advise checking out the Samples and Demos page on the website to see the kind of things Ext JS is capable of.

Once you’ve done that head over to the Ext JS download page and get the libraries. At the time of writing Ext JS is at version 2.2.

1) The HTML

So first off we will create our HTML page. This is very simple.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<!-- Ext JS CSS -->
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<!-- Ext JS Libs -->
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="ext-layout.js"></script>
<title>Ext JS Website CMS</title>
<meta name="robots" content="noindex, nofollow" />
</head>
<body>
    <div id="north">Website CMS</div>
 
    <div id="west">
    <ul>
    <li><a href="#" id="add">Add Tab</a></li>
    </ul>
    </div>
 
    <div id="center">My content...</div>
</body>
</html>

The two things to notice here are our includes in the <head> section:

<!-- Ext JS CSS -->
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<!-- Ext JS Libs -->
<script type="text/javascript" src="ext/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext/ext-all.js"></script>
<script type="text/javascript" src="ext-layout.js"></script>

…and our three <div> tags that our content is going to come from:

<div id="north">Website CMS</div>
 
<div id="west">
<ul>
<li><a href="#" id="add">Add Tab</a></li>
</ul>
</div>
 
<div id="center">My content...</div>

The CSS and javascript files we included are from the Ext JS library you have just downloaded. These are the base includes you need to get Ext JS to work. The only other include we have is ext-layout.js which we will write later in this tutorial.

The three <div> tags, as you might have guessed, represent the three content areas we will have in our layout. A header (north), a navigation column (west) and our main content area (center) which will be tabbed. I should point out that this is only an exmaple and there are many different types of layout you can utilize in Ext JS.

2) The Javascript

So this is where all the exciting things happen. Our ext-layout.js looks like:

Ext.onReady(function() {
 
    //Create our centre panel with tabs
    var tabs = new Ext.TabPanel({
        region:'center',
        activeTab:0,
        margins: '5 5 5 0',
        resizeTabs:true, // turn on tab resizing
        minTabWidth: 115,
        items:[{ //add an initial tab
            title: 'Dashboard',
            contentEl: 'center', //Get our content from the "center" div
            closable:true
        }]
    });
 
    //Create our layout
    var viewport = new Ext.Viewport({
        layout:'border', //set the layout style. Check the Ext JS API for more styles
        defaults: {
            collapsible: false,
            split: true
        },
        items: [{    
     title:'Header',
            region: 'north',
            contentEl: 'north', //Get our content from the "north" div
            margins: '5 5 5 5',
            height: 70,
     split:false //cannot resize this area
        },{
            title:'Navigation',
            collapsible: true, //make this column collapsable
            region:'west',
            contentEl: 'west', //Get our content from the "west" div
            margins: '5 0 5 5',
            cmargins: '5 5 5 5',
            width: 175,
            minSize: 100, //set the limits for resizing
            maxSize: 250 //set the limits for resizing
        },
 /* Add our tab panel. We could create our tab panel here like 
         * we have above but the functions below need to reference 
         * the tab panel so we use the "tabs" variable instead. */
        tabs 
        ]
    });
 
    /* Add a tab. To make this more useful you could
     * pass in prameters like a title and content. */
    function addTab(){
        tabs.add({
            title: 'Another Tab',
            html: 'Tab Body<br/><br/>',
            closable:true
        }).show(); //show the tab
    }
 
    //Add an "onclick" event to our link so tabs can be added
    Ext.get('add').on('click', function(){
        addTab();
    });
});

So what are we doing here? First off we are creating our TabPanel. We could create this in the Viewport like the other regions but the functions later on need to reference it. So instead we assign it to the variable “tabs”. Most of what happens inside the method is either self explanatory or commented so I won’t go into it here.

We then create the Viewport which is our layout. First off we set which type of layout we want. Ext JS offers many different kinds of layout. To find out more about them you can check the Ext JS API or check out the Ext JS Layout Browser.

Once we have set our defaults we then add our regions in the form of JSON data under the option “items”. Each item has it’s own config options which again I won’t go into as they are pretty self explanatory. See the source code to see what I mean.

Finally we have a method which adds a tab to the TabPanel. This is just an example to show you how this works. To make it more useful you could pass title and content parameters into the addTab method, or use the autoLoad option to load a specific file. Again see the API for more information.

The very last part of the code is Ext’s way of adding an “onclick” event to the “Add Tab” link we have in our west region. Again this is quite simple.

Conclusion

So there you have a simple layout that could be used in the backend of a website CMS. This tutorial is also intended to be an introduction to Ext JS. Ext JS has a wide range of functionality and you should be aware that this tutorial only scratches the surface. So if you are interested in Ext JS and want to know more about it head on over to extjs.com.

View the Demo Download the ZIP file

Related Posts

More?

If you enjoyed this post, please consider promoting it.
  • Digg
  • del.icio.us
  • StumbleUpon
  • Design Float
  • Reddit
  • Mixx
  • Technorati

Remeber to subscribe to the feed and get future articles delivered to your feed reader.

If you want to discuss this tutorial or any other thoughts you have then you can do so over on our fourm.

Comments

  1. This is probably the first decent ExtJS tutorial I have seen anywhere and with source files as well. ExtJS doesn’t get the credit it deserves and there are not nearly enough ExtJS resources.

    I really like this web-site. It was a chance find on Stumbleupon and I must say I am impressed. I will definitely be returning.

  2. [...] | user-saved public links | iLinkShare 1 votesCreating a CMS Website Layout using Ext JS>> saved by datazert 2 days ago3 votesGHD sit-up/back ext/thruster/pullup WOD>> saved by [...]

  3. If you are looking for an example of a CMS written using ExtJS take a look at Beezilla CMS website builder http://www.beezilla.com. There is a free trial, your comments are more than welcomed

Leave a Comment

(required)

(required)