Wednesday, November 12, 2014

Nested Tab example in Ext-Js

While trying samples with, 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-">
    <!-- LIBS -->
    <script type="text/javascript" src="\ext-"></script>
    <!-- APP -->
    <script type="text/javascript" src="./app.js"></script>

And the following in my "app.js" file


name: "Tab Panel example",
launch : function() {
var tabs = Ext.create('', {
width : 450,
height: 400,
renderTo: document.body,
activeTab : 1,
items : [{
itemId : 'tab1',
html: 'First tab content',
closable : true
}, {
itemId : 'tab2',
closable : true,
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',


The end result that I obtained is as follows. 


No comments:

Post a Comment