Javascript 嵌套在hbox布局中的ExtJS vbox布局存在问题
我正试图让布局看起来像这样：Javascript 嵌套在hbox布局中的ExtJS vbox布局存在问题,javascript,layout,extjs,Javascript,Layout,Extjs,我正试图让布局看起来像这样： （来源：） 我试着让它工作起来很开心。我终于得到了一些几乎可以工作的东西，但这仅仅是因为我加入了ExtJS的3.2测试版 我还有最后一个问题。下面的代码将几乎正确地显示面板，但是，右侧面板不会拉伸以填充容器的右半部分 如果我添加一个布局配置（如注释掉的代码所示）并删除布局属性，那么我最终会得到所有三个垂直排列的面板，而不是两个hbox面板被拉伸以填充空间，而vbox面板则位于彼此上方 我非常感谢有人仔细阅读下面的代码，指出我遗漏了什么，或者我是否在ExtJS 3.
（来源：） 我试着让它工作起来很开心。我终于得到了一些几乎可以工作的东西，但这仅仅是因为我加入了ExtJS的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>
Ext.BLANK_IMAGE_URL='/script/Ext/resources/images/default/s.gif'；
Ext.onReady（函数（）{
var detailPanel={
id:“详细信息面板”，
contentEl:'pageDetail'，
标题：“详细信息面板”
};
var workflowPanel={
id:“workflowpanel”，
标题：“页面状态”，
contentEl:“页面工作流”
};
var accessPanel={
id:“访问面板”，
标题：“页面访问”，
contentEl:“页面访问”
};
var外部面板={
标题：“额外面板”，
布局配置：{
键入：“vbox”，
对齐：“拉伸”，
包装：“开始”
},
默认值：{
弹性：1，
框架：正确
},
项目：[工作流面板，访问面板]
};
var概览面板={
布局：“hbox”，
/*布局配置：{
类型：'hbox'，
对齐：“拉伸”，
包装：“开始”
},
*/
默认值：{
框架：对，
弹性：1
},
项目：[详细面板，外部面板]
};
vp=新的外部视口({
项目：[概览面板]，
renderTo:Ext.getBody（）
});
});
页面URL
/接触/
导航标题
联系。。。
将项目与类型关联
关联与其他项目相关的项目
当前状态
通过用户名于2010年3月8日23:23直播
工作流
一些状态文本
最后更新
07/03/2010 10:10
更新人
用户名*
Lorem ipsum dolor sit amet，是一位杰出的献身者。Mauris vitae neque risus，非元素弧。Donec et convallis ipsum。Vivamus nec viverra nunc。
谢谢Jay（顺便说一句，去买Jay的书《ExtJS在行动中》）在ExtJS 3.4中有一个表格布局：
我错误地否决了这一点，如果您对其进行任何编辑，我将很乐意恢复我的否决票。您的layoutConfig完全修复了我的布局运行失败。谢谢：）
vp = new Ext.Viewport({
layout : 'fit',
items : [overviewPanel] ,
renderTo : Ext.getBody()
});
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]
};