form.html、report.html、console.html の 3 つのファイルがあります。console.html ページで 2 つの問題に直面しています。
「report.html」をロードしようとしていますが、静的コンテンツのみがロードされているか、extJs コンポーネントがロードされていないか、スクリプトが実行されていません。
「form.html」を読み込もうとしています。このコードでは、form.html と extJs コンポーネントを正常にロードできます。しかし、問題は、tab2 が読み込まれると、tab1 をアクティブ化/表示できないことです。
どんな助けにも感謝します。エラーのない autoLoad の例はどれでもかまいません。
Console.html は次のとおりです。
<head>
<title>Sample Console</title>
<link rel="stylesheet" type="text/css" href="../ExtJs/resources/css/ext-all.css" />
<script type="text/javascript" src="../ExtJs/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
Ext.create('Ext.panel.Panel', {
renderTo: 'frmSampleConsole',
split: true,
height : '100%',
width : '100%',
layout:'border',
defaults: {
collapsible: true,
split: true
//bodyStyle: 'padding:15px'
},
items:
[
{
title: 'Report',
region : 'west',
width : 280,
autoLoad : 'report.html',
contentType: 'html',
scripts : true
}
,
{
id :'tabpanel',
xtype:'tabpanel',
title: 'Main Content',
collapsible: false,
region:'center',
items : [
{
id : 'tab1',
title: 'Tab1',
collapsible: false,
margins: '5 0 0 0',
activeTab:0,
items: [
{
html : 'Sample html content'
}
]
},
{
id :'tab2',
title : 'Tab2',
layout : 'fit',
closable: true,
loader: {
url: 'form.html',
contentType: 'html',
autoload: true,
loadMask: true,
scripts: true
},
listeners: {
render: function(tab) {
tab.loader.load();
}
}
}
]
}
]
});
});
</script>
</head>
<body>
<div id = 'frmSampleConsole'></div>
</body>
</html>