Ext Js and the Ext.TabPanel a tutorial
Posted on | March 2, 2008 |
Hi,
In this post I aim to show you a little more about Ext JS then just the message box. I have played around with the Ext.TabPanel recently and I have documented my findings to hopefully help someone out there get on board with some of the features of it.
Firstly I’m assuming you have all the Ext JS files included in your page, I’m too lazy to cover that again… now in your HTML page add the following 4 divs.
<div id="site_content"> <div id="4" class="x-tab" title="additional div tab">this should be a paragraph but look at the class</div> </div> <div id="tab1" class="x-hide-display">This is tab one</div> <div id="tab2" class="x-hide-display">This is tab two</div>
Now a few notes on these divs. The div with id ‘site_content’ is that Tab container, e.g. It will be used to hold all the tabs. The div inside site_content is an autoTab. More on these later.
The additional 2 divs outside the site_content div will also be tabs.
So, now we add the Ext Js code to the mix, this is were all the HTML above comes into play. Add the following code either in the HEAD section of your document (if you do this wrap it in a call to Ext.onReady() ) or in a SCRIPT tag at the bottom of your page.
var tabs = new Ext.TabPanel({
renderTo: 'site_content',
activeTab : 0,
deferredRender: false,
autoTabs : true,
items : [{
title:'1st',
contentEl : 'tab1',
},
{
title: '2nd',
html : 'this is the html property',
},
{
title : '3rd',
autoLoad : ‘a_remote_page_on_your_server.php’,
}]
});
So to explain all of that. We have created a new Ext.TabPanel and we will be using the variable tabs to refer to it later.
In the constructor of the Ext.TabPanel we specify some configuration options in a config object ({option:value}).
The most important options here are ‘renderTo’, ‘activeTab’ and the ‘items’ collection.
‘renderTo’ is the div on your page that you specify as the tab panel container.
‘items’ is a collection of objects which will make up the tabs.
‘activeTab’ is the tab which will be shown when the tabs appear.
Simple stuff so far, check out your page to see if everything appears as it should.
Now just to quickly explain the defferedRender and autoTabs properties. These are used to grab any divs marked with the x-tab css class. As long as the x-tab div resides inside the site_content (TabPanel) div then this will be rendered as a tab. Specify a title attribute for the tab title.
It’s a cool feature autoTabs, but I feel it makes your code difficult to understand if you’ve made the tabs outside your container div. However if they’re all inside your container div then it’s cool.
Now the items collection
The tabs for a tab panel can be generated in many ways as I have illustrated you can create tabs inside your container, and set them up using auto tabs or you can create them outside your container div and specify them by their DOM id using the contentEl property when creating an item.
You can also have a tab NOT be a DOM element by specifying the html option. This creates a tab with the html content you give it. Its ok if you only want a little bit of text, anything more would be messy.
You can also get tab content from an AJAX call by using the autoLoad property and giving it a URL to load. This is my personal favorite method.
Autoload can also take an object of type Ext.Updater() which means you can specify loads of groovy options to display loading text and the like.
Ok done blogging for now… I will post again showing you how to switch tabs on key press and how to use the Ext.KeyMap class.
Comments
5 Responses to “Ext Js and the Ext.TabPanel a tutorial”
Leave a Reply
November 20th, 2008 @ 3:13 pm
do you know how to create a tabpanel inside another tabpanel? i’ve got a problem when try to do that. the tabpanel inside always doesn’t show correctly.
November 20th, 2008 @ 4:27 pm
Hey,
I thought you’re problem of tabs inside of tabs was interesting so with a little bit of playing around I’ve found out how to do this.
The trick (for me) was hiding the inner tab panel with a CSS class of “x-hide-display” and setting the tabs DIV to the contentEl property rather then my variable containing the actual TabPanel object.
Here’s the code.
P.S I’m having difficulty with my source code preview, so the html tags are fudged.
div id="outerTabs" /div
div id="innerTabs" class="x-hide-display" /div
script type="text/javascript"
// declare inner tabs first. Note the css hide class!
var _innerTabs = new Ext.TabPanel({
width:550,
renderTo : "innerTabs",
height:450,
items : [{
title : "Inner Tab 1",
html : "This is the inner tab 1"
},{
title : "Inner Tab 2",
html : "This is the inner tab 2"
}
]
});
// now wrap those inner tabs with the outer tabs.
var _outerTabs = new Ext.TabPanel({
renderTo: “outerTabs”,
bodyStyle : {padding :10},
width: “100%”,
activeItem : “outerTab1″,
items : [{
title: "Outer Tab 1",
html : "outer tab 1",
id : "outerTab1"
},{
title: "Outer Tab 2",
html : "outer tab 2",
id : "outerTab2"
},{
title :"Inner Tabs",
contentEl :"innerTabs" // set the content el! not the variable.
}]
});
/script
Hope this helps you out!
November 20th, 2008 @ 7:51 pm
thanks before,
but in my case i didn’t use html code. only javascript to create an user interface. if the outer tabs has already opened, nothing goes wrong. but if outer tabs newly opened, the second inner tabs show nothing. although i resize the browser. can you help me? i’m stuck with this problem.
November 23rd, 2008 @ 6:15 pm
Hmm I would try the Ext forums then or maybe modifying your layout to use the HTML source as I did.
Or, dirty hack time, try fire a tab change event onLoad ? probably not going to fix it but worth a shot!
December 20th, 2008 @ 2:30 pm
Hi bazz,
If you want the respective code for Nested Tabs you can have a look at here -
How to create nested tabs panel using ExtJS ->
http://developersnippets.com/2008/12/19/how-to-create-nested-tab-panels-using-extjs/
Thanks,
Vivek [http://www.developersnippets.com]