嵌套在hbox布局中的ExtJS vbox布局的问题 [英] Problem with ExtJS vbox layout nested in a hbox layout
问题描述
我正在尝试一个布局看起来像这样：
hbox with vbox right panel http ：//img124.yfrog.com/img124/7643/mockup.png
I'm trying to get a layout to look like this : hbox with vbox right panel http://img124.yfrog.com/img124/7643/mockup.png
我有各种各样的乐趣试图让这个工作。我终于得到了一些几乎可以工作的东西，但是只因为我放弃了Ext JS的3.2测试版。
I've had all sorts of fun trying to get this working. I finally got something that almost works, but only because I dropped in the 3.2 beta of Ext JS.
我有一个最后的问题。下面的代码将几乎正确地显示面板，但是右侧面板没有伸展到填满容器的右半边。
I'm left with one final problem. The code below will display the panels almost correctly, however, the right hand panel doesn't stretch to fill the right hand half of the container.
如果我添加一个布局config（在代码中注释掉），并删除布局属性，然后我最终排列垂直排列的所有三个面板，而不是两个hbox面板被拉伸以填充空间，而vbox面板彼此之间。
If I add a layout config (shown in the code commented out) and remove the layout attribute, then I end up with all three panels arranged vertically, rather than the two hbox panels being stretched to fill the space and the vbox panels being above one another.
我真的很感激有人传递下面的代码，并指出我错过了什么，或者如果我在ExtJS 3.2b中遇到了一个错误。
I'd really appreciate someone passing an eye over the code below and pointing out what I'm missing or if I've encountered a bug in ExtJS 3.2b.
谢谢
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>
推荐答案
所以，
我需要将我的视口设置为布局类型fit
I needed to set my viewport to be of layout type "fit"
vp = new Ext.Viewport({
layout : 'fit',
items : [overviewPanel] ,
renderTo : Ext.getBody()
});
然后我需要将layout属性添加到vbox和hbox（以前我发现布局属性与layoutConfig类型属性拧紧的东西，所以删除它们）
then I needed to add the layout attribute into the vbox and the hbox (previously I found that the layout attribute with the layoutConfig type attribute screwed things up, so removed them)
var extraPanel = {
title : 'extra panel',
layout : 'vbox',
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]
};
这2个变化给了我一个漂亮的布局，正是我想要显示的方式。
Those 2 changes gave me a beautiful layout, exactly the way I wanted it to display.
谢谢Jay（PS。去买Jay的书ExtJS in Action;））
Thanks Jay (PS. go buy Jay's book "ExtJS in Action" ;) )
这篇关于嵌套在hbox布局中的ExtJS vbox布局的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
![hbox with vbox right panel http ：//img124.yfrog.com/img124/7643/mockup.png](\"http://img124.yfrog.com/img124/7643/mockup.png\"){kind=link}