ExtJS Nested Tab Set with Demo
Ok, following up on my last entry, here is the same nested tab set done with the ExtJS UI Library. I went the the "Build Your Own" section within "Downloads" and built a script for JQuery with the ExtJS Core and the TabPanel. I also downloaded the whole library so that I had all of the example scripts, css, and images. After this I included the following files in my document header (notice the pathing changes):
<script src="http://www.myserver.com/js/jquery/jquery-1.1.2.pack.js" type="text/javascript"></script>
<script src="http://www.myserver.com/js/ext-1.0/ext.js" type="text/javascript"></script>
<script src="http://www.myserver.com/js/custom/ExtJSTabsDemo.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://www.myserver.com/resources/css/ext-1.0/tabs.css" type="text/css">
<link rel="stylesheet" href="http://www.myserver.com/resources/css/ext-1.0/tabs-example.css" type="text/css">
<script src="http://www.myserver.com/js/ext-1.0/ext.js" type="text/javascript"></script>
<script src="http://www.myserver.com/js/custom/ExtJSTabsDemo.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://www.myserver.com/resources/css/ext-1.0/tabs.css" type="text/css">
<link rel="stylesheet" href="http://www.myserver.com/resources/css/ext-1.0/tabs-example.css" type="text/css">
I also adjusted the pathing of all image references in the css files. Then we add the same div/form code from our prior example, minus the unordered lists.
<div id="container">
<div id="half-frag">
<form name="section-1" id="section-1" action="process.cfm" method="post" enctype="multipart/form-data">
<div id="form1_step1" class="frmStep">
Field 1: <input type="text" name="field1" id="field1" />
</div>
<div id="form1_step2" class="frmStep">
Field 2: <input type="text" name="field2" id="field2" />
</div>
<div id="form1_step3" class="frmStep">
Field 3: <input type="text" name="field3" id="field3" /><br />
<input type="submit" name="submit" id="submit" value="Post Form" />
</div>
</form>
</div>
<div id="fragment-1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="fragment-2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="fragment-3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
<div id="half-frag">
<form name="section-1" id="section-1" action="process.cfm" method="post" enctype="multipart/form-data">
<div id="form1_step1" class="frmStep">
Field 1: <input type="text" name="field1" id="field1" />
</div>
<div id="form1_step2" class="frmStep">
Field 2: <input type="text" name="field2" id="field2" />
</div>
<div id="form1_step3" class="frmStep">
Field 3: <input type="text" name="field3" id="field3" /><br />
<input type="submit" name="submit" id="submit" value="Post Form" />
</div>
</form>
</div>
<div id="fragment-1">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="fragment-2">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
<div id="fragment-3">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
</div>
</div>
The last thing is building that custom script, ExtJSTabsDemo.js. This is solely for defining your tab sets.
$(document).ready(function(){
var tabs1 = new Ext.TabPanel('container');
tabs1.addTab('half-frag','Form 1');
tabs1.addTab('fragment-1','pg 2');
tabs1.addTab('fragment-2','pg 3');
tabs1.addTab('fragment-3','pg 4');
// Create the nested tab set var nTabs1 = new Ext.TabPanel('half-frag');
nTabs1.addTab('form1_step1','Step 1');
nTabs1.addTab('form1_step2','Step 2');
nTabs1.addTab('form1_step3','Step 3');
// Activate in reverse order nTabs1.activate('form1_step1');
tabs1.activate('half-frag');
// Set the heights of each tab to be consistent // per tab set nTabs1.syncHeight(100);
tabs1.syncHeight(150);
});
var tabs1 = new Ext.TabPanel('container');
tabs1.addTab('half-frag','Form 1');
tabs1.addTab('fragment-1','pg 2');
tabs1.addTab('fragment-2','pg 3');
tabs1.addTab('fragment-3','pg 4');
// Create the nested tab set var nTabs1 = new Ext.TabPanel('half-frag');
nTabs1.addTab('form1_step1','Step 1');
nTabs1.addTab('form1_step2','Step 2');
nTabs1.addTab('form1_step3','Step 3');
// Activate in reverse order nTabs1.activate('form1_step1');
tabs1.activate('half-frag');
// Set the heights of each tab to be consistent // per tab set nTabs1.syncHeight(100);
tabs1.syncHeight(150);
});
Notice there's quite a bit more JS involved here than in our previous example. But, it does work.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Comments
[Add Comment]
I downloded this but couldnt get it working, I saw the .cfm file has nothing CFM specific tag so renamed it to .htm and changed the path of scripts and CSS but still it shows only a html form with 3 fields and submit button.
# Posted By Webb Pandey
| 11/13/07 8:16 PM
This demo was done using the ExtJS 1.1.1 library, and it's working at the bottom of the post. Have you maybe downloaded the 2.0 library instead? (no, the library is not included in the download) I believe the syntax is slightly different.
# Posted By Cutter
| 11/14/07 6:24 AM
[Add Comment]