Tôi đang cố gắng để có được một bố cục trông như thế này: hbox with vbox right panel http://img124.yfrog.com/img124/7643/mockup.pngVấn đề với cách bố trí vbox ExtJS lồng nhau trong một bố cục hbox
Tôi đã có tất cả các loại vui vẻ cố gắng để làm việc này. Cuối cùng tôi đã có một cái gì đó mà hầu như làm việc, nhưng chỉ vì tôi đã giảm trong phiên bản 3.2 của Ext JS.
Tôi còn lại với một vấn đề cuối cùng. Các mã dưới đây sẽ hiển thị các bảng gần như chính xác, tuy nhiên, bảng điều khiển bên phải không căng ra để điền vào nửa bên phải của container.
Nếu tôi thêm cấu hình bố cục (hiển thị trong mã đã nhận xét) và xóa thuộc tính bố cục, thì tôi sẽ kết thúc với tất cả ba bảng được sắp xếp theo chiều dọc chứ không phải hai ô hbox được kéo dài để lấp đầy không gian và vbox tấm đang ở trên nhau.
Tôi thực sự đánh giá cao ai đó đang theo dõi mã bên dưới và chỉ ra những gì tôi bị thiếu hoặc nếu tôi gặp lỗi trong ExtJS 3.2b.
Cảm ơn
Stephen
<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>
bạn layoutConfig hoàn toàn cố định thất bại bố trí chạy của tôi. Cảm ơn :) – Stevko