How to create nested tabs panel using ExtJS

On 12.19.08, In Ext JS, Featured, JavaScript, Programming, by
Tags: ,
Post Pic

I think everybody those who are in web development environment or those who are in the other areas of development, and those who are JavaScript developers might have an idea or aware of this amazing API called ‘ExtJS‘, I started working on this since long back and developed some of the projects, in my upcoming articles I will post some useful snippets which going to help you guys a lot in implementing some tasks for projects.

Below is the simple and sample snippet for creating nested tabs using Ext JS, after the launch of Ext JS 2.2 SDK I started working on some simple projects, I have download the latest Ext JS 2.2 SDK from download page. So Guys! before looking at the below code just download the respective Ext JS 2.2 SDK on your desktop and just download the below tutorial and save it to this location: ExtJS2.2\examples\tabs this is because I have not changed the respective relative paths.

Live Preview | Download

Below code should be placed in between of

…. 

1
2
3
4
5
6
7
8
9
10

<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />


<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>

<script type="text/javascript" src="../../ext-all.js"></script>

<link rel="stylesheet" type="text/css" href="tabs-example.css" />

<link rel="stylesheet" type="text/css" href="../shared/examples.css" />

Below code should be placed in between of

…. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

<h1>Nested Tab Panel Example</h1>
<h3>Nested Tabs with auto height that resize to the content.</h3>
<br>

<div id="tabsContainer">
  <div id="parentTab1" class="x-hide-display">
    
    <div id="childTab1" class="x-hide-display">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus.</p>
    </div>
    <div id="childTab2" class="x-hide-display">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus.<br/>
        <br/>
        Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.</p>
    </div>
    
  </div>
  <div id="parentTab2" class="x-hide-display">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus.</p>
    
    <div id="childTab3" class="x-hide-display">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus.</p>
    </div>
    <div id="childTab4" class="x-hide-display">
      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed metus nibh, sodales a, porta at, vulputate eget, dui. Pellentesque ut nisl. Maecenas tortor turpis, interdum non, sodales non, iaculis ac, lacus.<br/>
        <br/>
        Vestibulum auctor, tortor quis iaculis malesuada, libero lectus bibendum purus, sit amet tincidunt quam turpis vel lacus. In pellentesque nisl non sem. Suspendisse nunc sem, pretium eget, cursus a, fringilla vel, urna.</p>
    </div>
    
  </div>
</div>

Below is the respective JavaScript code for the tabs to rendered. Copy & paste the same just below this line

1

<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

<script language="javascript">
Ext.onReady(function(){
        //parent tabs
    var tabs = new Ext.TabPanel({
        renderTo: 'tabsContainer',
        width:450,
        activeTab: 0,
        frame:true,
        defaults:{autoHeight: true},
        items:[
            {contentEl:'parentTab1', title: 'Parent Tab1'},
            {contentEl:'parentTab2', title: 'Parent Tab2'}
        ]
    });
 
        //subtabs
        var subtabs = new Ext.TabPanel({
        renderTo: 'parentTab1',
        autoWidth:true,
        activeTab: 0,
        frame:true,
        defaults:{autoHeight: true},
        items:[
            {contentEl:'childTab1', title: 'Sub Tab1'},
            {contentEl:'childTab2', title: 'Sub Tab2'}
        ]
    });
 
        //subtabs
        var subtabs = new Ext.TabPanel({
        renderTo: 'parentTab2',
        autoWidth:true,
        activeTab: 0,
        frame:true,
        defaults:{autoHeight: true},
        items:[
            {contentEl:'childTab3', title: 'Sub Tab3'},
            {contentEl:'childTab4', title: 'Sub Tab4'}
        ]
    });
 
});
script>

Below is the snap shot of the same:

Nested Tabs

Nested Tabs

Live Preview | Download

Related Entries...

admin

Visit Authors Website  |  All Articles From This Author

You Might Like:

Advertisement

Please let us know your feedback about the article through the comments section below, we want to hear from you about our website. And your comment / advice may help us to serve you better in upcoming articles.

Thank You!
Vivekanand [Founder of DeveloperSnippets]

12 Responses

maddy
12.19.08

Hi

thanks for a interesting article and code very useful , what i would like to know can i load an external page from my own domain in the nested tabs
something like this

HINDI ENGLISH
Hindi has 7 tabs content from a different page
English has three tabs from different pages
in both cases i would nto mind loading the whole page (*.html, *1.html etc)

Vivekanand
12.19.08

Hi Maddy,

Yeah We do have Ajax Tabs…. I will work on it and will let you know, thanks for your comment.

Thanks,
Vivek

karthick
12.19.08

Hi
thanks for nested tabs exampe..
In EXTJS tabs, how to create login form and where to give the action.

admin
12.19.08

Hi Karthick,

Firstly I would like to thank you for your valuable comment, regarding your query, I will work on it and will let you know…

Thanks,
Vivek
[https://developersnippets.com, ]

Harika
12.19.08

Thanks for the valuable code and the code helped me a lot
Can u tell me how to pass an html code to the DIV dynamically …i.e, from the ds we will get a value no i want to pass that to the DIV …
Thanks
Harika

admin
12.19.08

Hi Harika,

Thanks for your comment, here is the answer for your question: if you want to print a value onto a DIV dynamically we can use “innerHTML” like, as you have said value is coming from “ds”, lets say it has given “5″ then if you want to print the same on div, then you can use like document.getElementById(‘yourIDName’).innerHTML=dsvalue;

Hope this might help you…

Thanks,
Vivek
[]

laxman
12.19.08

i like this website.This site will useful to every developer.

Noelia
12.19.08

Hi! thanks for nested tabs exampe.

If I want to access to the subtab 4 from another page, How can I do it?
ie: I want to put a link in a page that would redirect to the information of the subtab 4

Thanks!

admin
12.19.08

Hi Noelia,

For your query, there is a bookmarking tab facility in ExtJS, I mean in the URL you need to specify which tab to open. Just I will try and will let you know on the same. Hope this is ok with you.

Thanks,
Vivek

admin
12.19.08

Hi Noelia,

This feature might help you… https://developersnippets.com/2008/12/30/onclick-of-a-link-open-respective-accordion-panel/
this is just a concept…

Thanks,
Vivek

Samir
12.19.08

Hi Vivek i m new bee to Extjs i want some help from your side. i.e i want to click on menu item and on that base i want to load a extjs grid or form in center region of that layout.

admin
12.19.08

Hi Samir,

Just give me sometime to work on the same and will get back to you. Hope this is fine with you.

Thanks,
Vivek

Leave Your Response