9
我試圖讓佈局看起來像這樣： hbox with vbox right panel http://img124.yfrog.com/img124/7643/mockup.png問題的ExtJS的VBOX佈局嵌套在一個橫向盒佈局
我已經試圖讓這個工作的樂趣種種。我終於得到了幾乎可行的東西，但只是因爲我放棄了Ext JS的3.2測試版。
我剩下最後一個問題了。下面的代碼將幾乎正確地顯示面板，但是，右側面板不會拉伸以填充容器右側的一半。
如果我添加一個佈局配置（在代碼中註釋出來）並刪除佈局屬性，那麼我最終將全部三個面板垂直排列，而不是兩個hbox面板被拉伸以填充空間和vbox面板在彼此之上。
我真的很感謝有人通過下面的代碼，指出我錯過了什麼，或者如果我在ExtJS 3.2b中遇到了一個錯誤。
感謝
斯蒂芬
<html>
<head>
<script src="/script/ext/adapter/ext/ext-base-debug.js"></script>
<script src="/script/ext/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.BLANK_IMAGE_URL = '/script/ext/resources/images/default/s.gif';
</script>
<script type="text/javascript">
Ext.onReady(function() {
var detailPanel = {
id : 'detail-panel',
contentEl : 'pageDetail',
title : 'Detail Panel'
};
var workflowPanel = {
id : 'workflowpanel',
title : 'Page Status',
contentEl : 'pageWorkflow'
};
var accessPanel = {
id : 'accesspanel',
title : 'Page Access',
contentEl: 'pageAccess'
};
var extraPanel = {
title : 'extra panel',
layoutConfig : {
type : 'vbox',
align : 'stretch',
pack : 'start'
},
defaults : {
flex : 1,
frame : true
},
items : [workflowPanel,accessPanel]
};
var overviewPanel = {
layout : 'hbox',
/* layoutConfig : {
type :'hbox',
align : 'stretch',
pack : 'start'
},
*/
defaults :{
frame : true,
flex : 1
},
items : [detailPanel,extraPanel]
};
vp = new Ext.Viewport({
items : [overviewPanel] ,
renderTo : Ext.getBody()
});
});
</script>
<link rel="stylesheet" type="text/css" href="/script/ext/resources/css/ext-all.css" />
</head>
<body>
<div id="overview" class="x-hidden">
<div id="pageDetail">
<dl>
<dt>Page URL</dt>
<dd>/contact/</dd>
<dt>Navigation Title</dt>
<dd>Get in touch...</dd>
</dl>
<dl>
<dt>Associate project to types</dt>
<dd> </dd>
<dt>Associate projects related to other projects</dt>
<dd> </dd>
</dl>
</div>
<div id="pageExtra">
<div id="pageWorkflow">
<em>Current Status</em><br>
Live on 08/03/2010 23:23 by username
<br/>
<em>Workflow</em><br>
Some status text
<dl>
<dt>Last Updated</dt>
<dd>07/03/2010 10:10</dd>
<dt>Updated by</dt>
<dd>username*</dd>
</dl>
<br/>
</div>
<div id="pageAccess">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae neque risus, non elementum arcu. Donec et convallis ipsum. Vivamus nec viverra nunc.
</div>
</div>
</div>
</body>
</html>
你layoutConfig完全固定我的佈局啓動失敗。謝謝:) – Stevko 2015-06-03 18:39:04