首先说明下我的目标是想达到怎么样:
我要实现的是典型的布局是在Viewport中,左边west区域是个treepanel,右边center区域是个tabpanel,tabpanel的items通过add方法autoload进来。
但是发现通过autoload进来的话,被load的页面就无法进行常规布局(跟主机板一样,有treepanel,也有center面板,见图),也没办法让load进来的页面自动适应父panel的宽高。
[img]http://17ext.com/attachment.aspx?attachmentid=2158[/img]
下面这个是可以布局的,没用到autoload
[img]http://17ext.com/attachment.aspx?attachmentid=2159[/img]
代码如下:
不符合我的意愿的autoload
[code="java"]
不正常的
Ext.onReady(function(){ var contextPanel = new Ext.Panel({ region:'center', margins: '5 5 5 5', title: '主内容区', layout:'border', id:'contextPanel', autoLoad: {url: "son.htm",scripts: true, scope: this, nocache: true} }); var treePanel = new Ext.Panel({ region:'west', width:200, title: '主导航区', margins: '5 0 5 5', html: '主导航区' }); var panel = new Ext.Viewport({ layout:'border', items: [contextPanel,treePanel] }); });
[/code]
被load的文件的代码(son.htm):
[code="java"]
[/code]
下面这个代码是没有通过autoload进来的,可以实现子面板的布局:
[code="java"]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>可以正常使用的</title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css"/>
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>