Tutorial:TabPanel Basics

From Learn About the Ext JavaScript Library

Jump to: navigation, search

Summary: A brief introduction to using tab panels.

Author: Robin Percy

Published: Nov 12, 2007

Ext Version: 2.0

Languages:

English

Chinese

German

The following HTML provides the basic structures we'll build on with Ext. Copy it to a file named tptut.html on your web server and ensure you set the correct paths for ext-all.css, ext-base.js, and ext-all.js based on your Ext installation. tab_actions.js will be created in the following steps:

<html>
<head>
<title>TabPanel Tutorial</title>
<!-- Ext CSS and Libs -->
<link rel="stylesheet" type="text/css"	href="../include/ext2/resources/css/ext-all.css" />
<script type="text/javascript"	src="../include/ext2/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../include/ext2/ext-all.js"></script>
 
<!-- Custom CSS and Libs -->
<script type="text/javascript" src="./tab_actions.js"></script>
<style>
#actions li {
	margin:.3em;
}
#actions li a {
	color:#666688;
	text-decoration:none;
}
</style>
</head>
<body>
 
 
<ul id="actions" class="x-hidden">
	<li>
		<a id="use" href="#">Use Existing Tab</a>
	</li>
	<li>
		<a id="create" href="#">Create New Tab</a>
	</li>
</ul>
 
<div id="tabs"></div>
</body>
</html>

There are two notable elements in the above code. We will use the "actions" list as our simple actions menu to control tab creation. That "tabs" div will be used as the container for our first default tab in the TabPanel.

Step 2: Build Ext Structures

Now create a new file in the same directory as the one above. Name this one tab_actions.js and insert the JavaScript below:

Ext.onReady(function(){
   // Menu containing actions
    var tabActions = new Ext.Panel({
    	frame:true,
    	title: 'Actions',
    	collapsible:true,
    	contentEl:'actions',
    	titleCollapse: true
    });
 
    // Parent Panel to hold actions menu
    var actionPanel = new Ext.Panel({
    	id:'action-panel',
    	region:'west',
    	split:true,
    	collapsible: true,
    	collapseMode: 'mini',
    	width:200,
    	minWidth: 150,
    	border: false,
    	baseCls:'x-plain',
    	items: [tabActions]
    });
 
    // Main (Tabbed) Panel
    var tabPanel = new Ext.TabPanel({
		region:'center',
		deferredRender:false,
		autoScroll: true, 
		margins:'0 4 4 0',
		activeTab:0,
		items:[{
			id:'tab1',
			contentEl:'tabs',
    		title: 'Main',
    		closable:false,
    		autoScroll:true
		}]
    });
 
    // Configure viewport
    viewport = new Ext.Viewport({
           layout:'border',
           items:[actionPanel,tabPanel]});
});

The code above is wrapped is passed to the Ext.onReady method so that it will not be executed until all page elements have been loaded. The first thing we do is convert our actions list into a Panel called tabActions by specifying it's id as the contentEl (content element) configuration parameter.

Next, we create the parent Panel actionPanel to hold the menu panel. We pass tabActions as an item in the items parameter. Since actionPanel will be positioned by the Viewport's LayoutManager, we must specify a region in the configuration object.

The third component to create is the TabPanel itself. We want it in the middle of the page, which corresponds to the center region of the Viewport. We also pass it a list of Panel configuration objects to display as tabs. For this example we just display one on initial rendering, but several can be specified. Just ensure a block element exists on the page to use as a container for each panel. For example, we've specified tabs as the content element for the first Panel. Notice, we've also given the tab an id. This is critical if we're later going to check if the tab exists.

Finally, we setup the Viewport, which controls the viewable area of the browser. All that is needed is to specify the layout and a list of components do display. The components have already been configured with regions so the Viewport's LayoutManager knows where to place them.

You should now be able to browser to tptut.html and see two formatted columns with the Actions menu on the left and the tab panel taking up the rest of the screen.

Step 3: Create Tab Manipulation Logic

Now that we have all the elements created, we can add the methods for creating and updating the TabPanel. In order to test, we'll need to create three new pages in our work directory:

loripsum.html
sample0.html
sample1.html

The actual contents of these files doesn't matter, but should be different for each file so you can tell when they are loaded into a tab.

Important note: AJAX is being used, so you must run this on a HTTP server (you can not run ajax features from the local file system unless you use the ext-basex user extension). See here for additional information.

Insert the following code just below where viewport is created in tab_actions.js:

// Adds tab to center panel
    function addTab(tabTitle, targetUrl){
        tabPanel.add({
	    title: tabTitle,
	    iconCls: 'tabs',
	    autoLoad: {url: targetUrl, callback: this.initSearch, scope: this},
	    closable:true
	}).show();
    }
 
    // Update the contents of a tab if it exists, otherwise create a new one
    function updateTab(tabId,title, url) {
    	var tab = tabPanel.getItem(tabId);
    	if(tab){
    		tab.getUpdater().update(url);
    		tab.setTitle(title);
    	}else{
    		tab = addTab(title,url);
    	}
    	tabPanel.setActiveTab(tab);
    }
 
    // Map link ids to functions
    var count = 0;
    var actions = {
    	'create' : function(){
    		addTab("New Tab",'loripsum.html');
    	},
    	'use' : function(){
    		// Toggle between sample pages
    		updateTab('tab1','Replaced ' + count + ' Times','sample'+(count%2)+'.html');
    		count++;	    		
    	}
    };
 
    function doAction(e, t){
    	e.stopEvent();
    	actions[t.id]();
    }
 
    // This must come after the viewport setup, so the body has been initialized
    actionPanel.body.on('mousedown', doAction, null, {delegate:'a'});

addTab(...) takes title and URL string parameters creates a new tab by passing a config object to tabPanel.add(...). This returns the Panel object that has been created, and the above code immediately calls show() to display it.

updateTab(...) takes an additional tabId, which it uses to check if the tab already exists in the TabPanel. If it does, then the Panel's Updater is retrieved and used to update it's contents. Otherwise, addTab(...) is called to create the tab.

The final step is to add a listener to the actionPanel that calls the appropriate method for the selected action. First, an actions object is created. This can be thought of as a HashTable or Dictionary mapping action ids to methods. Notice the keys correspond to the HTML list items. Since the methods are simple, we create them inline. The counter variable is used onlyto toggle between the two sample pages and keep a count in the tab title so that tab updates are more obvious. It has no practical purpose.

We define an event handler doAction(...) that takes event and target objects, looks up the target's id in actions and calls the resulting method. doAction(...) is registered as a listener to actionPanel's mousedown event since it will be triggered when any of actionPanel's components are pressed; with the pressed component set as the event target.

Conclusion

You should now be able to refresh tptut.html and have a working example. Clicking the Use Existing Tab link will refresh the content in the first tab. Create new Tab' will create a new tab each time it is pressed. For more information, see the Advanced Tabs Example

Ext

Personal tools

Views

Tutorial:TabPanel Basics

From Learn About the Ext JavaScript Library

Contents

Summary

Step 1: Create HTML Skeleton

Step 2: Build Ext Structures

Step 3: Create Tab Manipulation Logic

Conclusion

Learn Ext JS

Learn Ext GWT

Wiki Utilities

Toolbox

Ext JS

Ext GWT

Ext Core

JSBuilder

Support Subscriptions

Training

Community

Ext Solutions

Ext JS

Ext GWT

Help