Loading tab data with Ajax

In this recipe, you will learn how to load static and dynamic content into a TabPanel's tab when the tab is first activated.

A sample TabPanel's tabs will load data from an HTML file, as seen below:

Another tab will receive its contents from a server page that makes a database call, as shown in the following screenshot:

Getting ready...

The sample data used in this recipe comes from the Sakila sample database.

Note

You can obtain the Sakila database, as well as the installation instructions, at http://dev.mysql.com/doc.

How to do it...

1. 1. Define the Tabpanel:

   Ext.onReady(function() {
   var tabs = new Ext.TabPanel({
   renderTo: document.body,
   activeTab: 0,
   width: 500,
   height: 250,
   plain: true,
   defaults: { autoScroll: true },
   

2. 2. On the tabs, use the autoLoad config option to specify the page that will provide the tab's contents:

   items: [{
   title: 'First Tab',
   HTML: ""
   }, {
   title: 'Ajax load from HTML file',
   bodyStyle: 'padding:5px;',
   autoLoad: { url: 'tabs-ajax-load-data.HTML...