Translation of "Tutorial:TabPanel Basics"

Tutorial:TabPanel Basics

Summary

This tutorial provides a quick introduction to the TabPanel class. It is based on techniques I've observed in the TabPanel examples as well as the source code for the Ext API Documentation section. By the end of it, you should have a working tab panel, with the ability to:

- Create new tabs with content loaded from a URL.

- Test whether a tab exists, and load new content if it does.

Step 1: Create HTML Skeleton

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:

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:

The code above 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 its 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.