How to Load Ext Js Tab after cliclking it

Question

I got a Ext JS block of code generating 4 tabs:

Javascript:

var tabs;
$(document).ready( function() {
            fullscreen: true,
            renderTo: 'tabs1',
            width:900,
            activeTab: 0,
            frame:true,
            defaults:{autoHeight: true},
            items:[
                {contentEl:'AutoOrJudgemental', title: 'Tab 1 '},
                {contentEl:'CreditRequestQueues', title: 'Tab 2' },
                {contentEl:'ApplicationStatistics', title: 'Tab3'},
                {contentEl:'RequestStatus', title: 'Tab4'}
            ],
            listeners: {
                activeitemchange: function (tabs1) {
                    alert(tabs1.id);
                }
            }
    });

});

                                            var myChart = new FusionCharts( "/sbm/bpmportal/FusionCharts/Doughnut3D.swf", "myChartId-AutoOrJudgemental", "100%", "420", "0", "0" );

                                            myChart.setJSONData(respArr[0]);
                                            myChart.render("AutoOrJudgemental");

                                            myChart = new FusionCharts( "/sbm/bpmportal/FusionCharts/Column3D.swf", 
                                                    "myChartId-CreditRequestQueues", "100%", "420", "0" );

                                  xmlhttp.open("GET","/sbm/bpmportal/pages/ICDPDashBoard.do?drFrom="+fromDateStr+"&drTo="+toDateStr,true);
                                xmlhttp.send();
                            }
                            </script>

Can any one suggest a way to load the data in the tab only after we click it By default data in all the tabs are getting loaded.

Iam using Ajax call to get the data and displaying the chart using Fusion charts

 <p class="text">&nbsp; </p>
<div id="tabs1" style="float: left; width: 100%">               <div id="simple-int" class="x-hide-display"
style="float: left; width: 100%">
    <span id="AutoOrJudgemental"> </span>
</div>

Answer 1

Try this and let me know the result:

ExtJS Fiddle

Ext.onReady(function() {

Ext.create('Ext.tab.Panel', {
    width: 600,
    height: 400,
    id: 'sample-tab',
    activeTab: 0,
    items: [
        {
            title: 'TAB A',
            bodyPadding : 10,
            html: 'Tab A Sample Content'
        },
        {
            title: 'TAB B',
            bodyPadding : 10,
            loader: {
                url: 'http://www.google.com.tr',
                contentType: 'html',
                loadMask: true
            },
            listeners: {
                activate: function(tab) {
                    tab.loader.load();
                }
            }
        },
        {
            title: 'TAB C',
            bodyPadding : 10,
            html: 'Tab C Sample Content'
        }
    ],
    renderTo: Ext.getBody()
    });    
})