Wednesday, November 12, 2014

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. 


:)

No comments:

Post a Comment