Wednesday, November 12, 2014

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

And the following in my "app.js" file

 Ext.require('*'); Ext.application({ name: "Tab Panel example", launch : function() { var tabs = Ext.create('', { 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