Ext Javascript tools

I've always avoided using javascript. I truely hate javascript. Having said that I recenlty found myself having to add a tabbed section to a web page and I really could not be bothered to mess about. So I turned to Ext javascript tools library. It really made a nasty job actually quite easy. I was using the TabPanel, a couple of lines of code from the very good api example got me up and running and the resulting table showed good browser compatability.

write the javascript, include the required library files and stylesheets in the html page and off you go....

Here's my create tab javascript code:

/*
* Ext JS Library 2.1
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/

Ext.onReady(function(){
  // basic tabs 1, built from existing content
  var tabs = new Ext.TabPanel({
    renderTo: 'tabs1',
    width:620,
    activeTab: 0,
    frame:true,
    border:true,
    defaults:{autoHeight: true},
    items:[
      {contentEl:'tab1', title: 'Originating Number(s)'},
      {contentEl:'tab2', title: 'Recurring Charges'},
      {contentEl:'tab3', title: 'Cost Centre(s)'}
    ]]
  });


  function handleActivate(tab){
    alert(tab.title + ' was activated.');
  }
});


Then in my HTML page....

<div id="tabs1">
    <div id="tab1" class="x-hide-display">
    <p>
        tab1 text here...
    </p>
    </div>
    <div id="tab2" class="x-hide-display">
    <p>
        tab2 text here...
    </p>
    </div>
    <div id="tab3" class="x-hide-display">
    <p>
        tab3 text here...
    </p>
    </div>
</div>



Job done. comes all styled up and looks great.


You can mess with the options available in the API and take it from there.