Nested Tab example in Ext-Js

While trying samples with Ext.tab.Panel, as usual I though about the next step of using nested panels.

And I tried a few simple straight forward stuffs and for some reason it kept failing. Eventually I came up with an answer as usual. Guess I dont want to be stuck with this silly issue every again. And hence this post. Following is a part of my practise project which is necessary for the nested tab implementation

You can safely omit external.htm file for now

I have the following in code in the head section of my "index.html" file

 <!-- STYLES -->

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

 

    <!-- LIBS -->

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

 

    <!-- APP -->

    <script type="text/javascript" src="./app.js"></script>

And the following in my "app.js" file

Ext.require('Ext.tab.*');

Ext.application({

name: "Tab Panel example",

launch : function() {

var tabs = Ext.create('Ext.tab.Panel', {

width : 450,

height: 400,

renderTo: document.body,

activeTab : 1,

id:'parentTab',

items : [{

title:'Home',

itemId : 'tab1',

html: 'First tab content',

closable : true

}, {

title:'Away',

itemId : 'tab2',

closable : true,

items:[{

xtype:'tabpanel',

items : [{

title: 'Nested Tab 1',

itemId : 'nested tab1',

closable : true,

html:'nested tab1'

},{

title: 'Nested Tab 2',

itemId : 'nested tab2',

closable : true,

html:'nested tab2',

disabled:true

}]

}]

}]

});

}

});

The end result that I obtained is as follows. 

:)