87Components can live in tab panels too

var simpleTab = {

title : 'Simple tab',

html : 'This is a simple tab.' };

var closableTab = { title : 'I am closable',

html : 'Please close when done reading.', closable : true

};

var disabledTab = { title : 'Disabled tab',

itemId : 'disabledTab', html : 'Peekaboo!', disabled : true, closable : true };

var tabPanel = Ext.create('Ext.tab.Panel', { activeTab : 0, itemId : 'myTPanel', items : [ simpleTab, closableTab, disabledTab ] }); Ext.create('Ext.window.Window', { height : 300, width : 400,

Listing 4.8 Exploring a tab panel

Figure 4.16 A tab panel with children that have complex layouts Introduces static tab

b

Creates closable tab

c

Adds disabled tab

d

Instantiates tab panel

e

Renders tab panel

f

88 CHAPTER 4 Core UI components

layout : 'fit', items : tabPanel }).show();

Although you could’ve defined all of the items in this code in a single large object, we thought it’d be best to break it up so that everything is clear. The first three vari- ables define your tab panel’s children in generic object form, with the assumption that the defaultType (XType) for the TabPanel class is Panel. The first child is a simple and nonclosable tab

B

. One thing to note here is that all tabs are nonclos- able by default. This is why your second tab

c

has closable set to true. Next, you have a closable and disabled tab. Each of these child panel configuration objects has its own itemId, which will allow you to home in on it to do some operations such as enable, hide, and disable.

You then go on to instantiate your tab panel

d

. You set the activeTab parameter to 0. You do this because you want the first tab to be activated after the tab panel

e

is rendered. You can specify any index number in the tab panel’s items mixed collec- tion. Because the mixed collection is an array, the first item always starts with 0. Last, your tab panel’s items array has your three tabs specified.

Next, you create a container for your tab panel, an instance of Ext.Window

f

. You specify a Fit layout for the window and set the tab panel reference as its single item. The rendered code should display the tab panel shown in figure 4.17.

Now that you’ve rendered your first tab panel, you can start to have fun with it. You’ve probably closed the “I am closable” tab, which is okay. If you haven’t done so, feel free to explore the rendered UI control and close out the only closable tab when you’re comfortable doing so, which will leave only two tabs available: “My first tab” and “Disabled tab.”

Figure 4.17 Your first tab panel rendered inside a window

89 Summary

4.4.2 Tab management methods you should know

Because the TabPanel class is a descendant of Container, all of the common child- management methods are available to use. These include add, remove, and insert. There are a few other methods, though, that you’ll need to know to take full advan- tage of the TabPanel class.

The first of these is setActiveTab, which activates a tab as if the user had selected the item on the tab strip and accepts either the index of the tab or the component ID:

var tPanel = Ext.ComponentQuery.query('#myTPanel')[0]; tPanel.add({

title : 'New tab', itemId : 'myNewTab', html : 'I am a new Tab' });

tPanel.setActiveTab('myNewTab');

Executing this code will result in a new tab with the title of “New tab,” which gets acti- vated automatically. Calling setActiveTab after an add operation is akin to calling doLayout on a generic container. You also have the capability to enable and disable tabs at runtime, but this requires a different approach than simply calling a method on the tab panel.

The tab panel doesn’t have enable and disable methods, so in order to enable or disable a child you need to call those methods of the child items themselves. You can use listing 4.8 to enable your disabled tab. With the tPanel reference you created a bit ago, you can query for the disabled child item and enable it as such:

tPanel.down('#disabledTab').enable();

Yes, that’s all there is to it. The tab strip item (tab UI control) now reflects that the item is no longer disabled. This happens because the tab panel subscribes to the child item’s—you guessed it—enable and disable events to manage the associated tab strip items.

In addition to enabling and disabling tabs, you can hide them. To hide a tab, you have to access the tab property of the tab panel’s child items. To illustrate this, you’ll hide the disabled tab and then show it:

tPanel.down('#disabledTab').tab.hide();

To make it reappear, execute the following code:

tPanel.down('#disabledTab').tab.show();

You’ve now seen how easy it is to create and manage a tab panel.

4.5

Summary

We covered a lot of material about the Swiss Army knife of UI display widgets, the panel, which is enough to make just about any developer’s head spin. In exploring the Panel

90 CHAPTER 4 Core UI components

class, you saw how it provides a plethora of options to display user-interactive content, including toolbars, buttons, title bar icons, and miniature tools.

You used the Window class as a general container and mastered the art of adding and removing children dynamically, providing you with the ability to dynamically and drastically change an entire UI or a single widget or control.

In exploring the Window class and its cousin, MessageBox, you learned how you can replace the generic alert and prompt dialog boxes to get your user’s attention to display information or request user input. You also had some fun fooling with the animated wait MessageBox.

Finally you examined the tab panels, learning how to dynamically manage tab items, as well as a few of the usability pitfalls that the UI control brings.

In the next chapter you’ll explore the many Ext JS layout schemes, and you’ll learn the common uses and pitfalls of these controls.

91

In document Ext JS in Action, 2nd Edition (Page 112-116)