首先说明下我的目标是想达到怎么样：
我要实现的是典型的布局是在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"]
<!-- Ext.onReady(function(){ new Ext.Panel({ region:'center', bodyStyle: 'background-color:red;', renderTo: 'son_con', items: [ new Ext.Panel({ region:'west', width:200, title: '子导航区', margins: '5 0 5 5', html: '子导航区' }), new Ext.Panel({ region:'center', title: '子内容区', margins: '5 0 5 5', html: '子内容区' }) ] }); }); //-->
[/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>
Ext.onReady(function(){ var contextPanel = new Ext.Panel({ region:'center', margins: '5 5 5 5', title: '主内容区', layout:'border', id:'dddddddddddddd', //autoLoad: {url: "autoloaded.htm",scripts: true, scope: this, nocache: true} items: [ new Ext.Panel({ region:'center', width:200, title: '子内容区', margins: '5 5 5 5', html: '子内容区' }), new Ext.Panel({ region:'west', width:100, title: '子导航', margins: '5 0 5 5', html: '子导航' }) ] }); var treePanel = new Ext.Panel({ region:'west', width:200, title: 'Tree导航', margins: '5 0 5 5', html: '我是左边导航' }); var panel = new Ext.Viewport({ layout:'border', items: [contextPanel,treePanel] }); });
AutoLoad只是把目标页面当成json载入.
看下[url]http://yiminghe.iteye.com/blog/459087[/url]