Question

我有一个Ext JS代码块，生成4个标签：

使用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>

任何人都可以建议在我们点击它之后加载选项卡中的数据的方法默认情况下，所有选项卡中的数据都已加载。

我使用Ajax调用来获取数据并使用Fusion图表显示图表

 <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

试试这个，让我知道结果：

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()
    });    
})

如何在cliclking后加载Ext Js Tab

1 个答案: