Wednesday, November 12, 2014

While trying samples with Ext.tab.Panel, as usual I though about the next step of using nested panels and load an external html file into a panel.
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

No comments:

Post a Comment