Class Ext.TabPanel

A basic tab container. TabPanels can be used exactly like a standard Ext.Panel for layout purposes, but also have special support for containing child Components that are managed using a CardLayout layout manager, and displayed as seperate tabs.

There is no actual tab class — each tab is simply an Component such as a Panel. However, when rendered in a TabPanel, each child Component can fire additional events that only exist for tabs and are not available from other Component. These are:

• activate: Fires when this Component becomes the active tab.
  Listeners will be called with the following arguments:

  • tab : Panel
    The tab that was activated
• deactivate: Fires when the Component that was the active tab becomes deactivated.
  Listeners will be called with the following arguments:

  • tab : Panel
    The tab that was deactivated

To add Components to a TabPanel which are generated dynamically on the server, it is necessary to create a server script to generate the Javascript to create the Component required.

Ext.Ajax.request({
    url: 'gen-invoice-grid.php',
    params: {
        startDate = Ext.getCmp('start-date').getValue(),
        endDate = Ext.getCmp('end-date').getValue()
    },
    success: function(xhr) {
        var newComponent = eval(xhr.responseText);
        myTabPanel.add(newComponent);
        myTabPanel.setActiveTab(newComponent);
    },
    failure: function() {
        Ext.Msg.alert("Grid create failed", "Server communication failure");
    }
});

The server script would need to return an executable Javascript statement which, when processed using eval() will return either a config object with an xtype, or an instantiated Component. For example:

(function() {
    function formatDate(value){
        return value ? value.dateFormat('M d, Y') : '';
    };

    var store = new Ext.data.Store({
        url: 'get-invoice-data.php',
        baseParams: {
            startDate: '01/01/2008',
            endDate: '01/31/2008'
        },
        reader: new Ext.data.JsonReader({
            record: 'transaction',
            id: 'id',
            totalRecords: 'total'
        }, [
           'customer',
           'invNo',
           {name: 'date', type: 'date', dateFormat: 'm/d/Y'},
           {name: 'value', type: 'float'}
        ])
    });

    var grid = new Ext.grid.GridPanel({
        title: 'Invoice Report',
        bbar: new Ext.PagingToolbar(store),
        store: store,
        columns: [
            {header: "Customer", width: 250, dataIndex: 'customer', sortable: true},
            {header: "Invoice Number", width: 120, dataIndex: 'invNo', sortable: true},
            {header: "Invoice Date", width: 100, dataIndex: 'date', renderer: formatDate, sortable: true},
            {header: "Value", width: 120, dataIndex: 'value', renderer: 'usMoney', sortable: true}
        ],
    });
    store.load();
    return grid;
})();

Since that code is generated by a server script, the baseParams for the Store can be configured into the Store. The metadata to allow generation of the Record layout, and the ColumnModel is also known on the server, so these can be generated into the code.

When that code fragment is passed through the eval function in the success handler of the Ajax request, the code is executed by the Javascript processor, and the anonymous function runs, and returns the grid.

There are several other methods available for creating TabPanels. The output of the following examples should produce exactly the same appearance. The tabs can be created and rendered completely in code, as in this example:

var tabs = new Ext.TabPanel({
    renderTo: Ext.getBody(),
    activeTab: 0,
    items: [{
        title: 'Tab 1',
        html: 'A simple tab'
    },{
        title: 'Tab 2',
        html: 'Another one'
    }]
});

TabPanels can also be rendered from pre-existing markup in a couple of ways. See the autoTabs example for rendering entirely from markup that is already structured correctly as a TabPanel (a container div with one or more nested tab divs with class 'x-tab'). You can also render from markup that is not strictly structured by simply specifying by id which elements should be the container and the tabs. Using this method, tab content can be pulled from different elements within the page by id regardless of page structure. Note that the tab divs in this example contain the class 'x-hide-display' so that they can be rendered deferred without displaying outside the tabs. You could alternately set deferredRender to false to render all content tabs on page load. For example:

var tabs = new Ext.TabPanel({
    renderTo: 'my-tabs',
    activeTab: 0,
    items:[
        {contentEl:'tab1', title:'Tab 1'},
        {contentEl:'tab2', title:'Tab 2'}
    ]
});

// Note that the tabs do not have to be nested within the container (although they can be)
<div id="my-tabs"></div>
<div id="tab1" class="x-hide-display">A simple tab</div>
<div id="tab2" class="x-hide-display">Another one</div>