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
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>
The contents of my "external.html" file are as follows
<div id='karthick'>
My Custom text from an external HTMl
</div>
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 : 0,
id:'parentTab',
items : [{
title:'Home',
itemId : 'tab1',
xtype: 'container',
loader: {
url: 'external.htm',
autoLoad: true
},
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
}]
}]
}]
});
}
});
So the end result is as follows
The highlights in this example are
1. You are using a nested tabbed table created through Ext-js 4.2
2. It implements some inbuilt properties like
- closable:true
- and disable:true
3. You have included an external html file's content into your page
Note: this example wont work if you are trying this example in a local stand alone machine. Use a server like tomcat or IIS, because, the inclusion of content from an other html file includes AJAX requests in the back end by Ext-JS which would definitely fail in local or conclusively it requires a server to operate
So the end result is as follows
1. You are using a nested tabbed table created through Ext-js 4.2
2. It implements some inbuilt properties like
- closable:true
- and disable:true
3. You have included an external html file's content into your page
Note: this example wont work if you are trying this example in a local stand alone machine. Use a server like tomcat or IIS, because, the inclusion of content from an other html file includes AJAX requests in the back end by Ext-JS which would definitely fail in local or conclusively it requires a server to operate
No comments:
Post a Comment