在ExtJS中，如何在具有hbox布局的面板中并排放置两个字段集？
在ExtJS中，如何在具有hbox布局的面板中并排放置两个字段集？
提问于 2010-03-04 03:49:21
在ExtJS中，我在使用hbox布局的面板中并排放置两个字段集时遇到了一些问题。hbox布局似乎没有意识到字段集的高度，并将其截断，即使我显式地将面板的高度设置为较大的值。
它看起来是这样的：
蓝色边框是hbox面板，里面有两个字段集，“客户信息”和“所有者信息”。代码如下所示(简化并可在Firebug中运行)：
var clientInfo = {
xtype: 'fieldset',
defaultType: 'textfield',
title: 'Client Info',
items:
[
{ fieldLabel: 'First Name' },
{ fieldLabel: 'Last Name' },
{ fieldLabel: 'Cell Phone #' },
{ fieldLabel: 'Work Phone #' }
]
};
var ownerInfo = {
xtype: 'fieldset',
defaultType: 'textfield',
title: 'Owner Info',
items:
[
{ fieldLabel: 'First Name' },
{ fieldLabel: 'Last Name' },
{ fieldLabel: 'Cell Phone #' },
{ fieldLabel: 'Work Phone #' }
]
};
new Ext.Panel({
layout: 'hbox',
frame: true,
height: 400,
width: 800,
defaults: { flex: 1 },
items: [ clientInfo, ownerInfo ]
}).render(document.body);附注:如果删除defaults: { flex: 1 }，字段集将正确呈现，但不会自动调整大小以适应容器，这是我需要的。
有人知道如何修复这个渲染问题吗？谢谢。
回答 2
Stack Overflow用户
发布于 2010-03-24 23:50:28
在我开始显式地设置三个主要的layoutConfig选项之前，我对vbox和hbox有很多问题：
layoutConfig: {
flex: 1,
align: 'stretch',
pack: 'start'
}从他们的API中读到，在layoutConfig中指定一个' flex‘值听起来类似于一个默认值，但是自从设置了它并且我的布局正确工作后，我开始相信它是一个必填字段，在某种程度上，孩子的flex值会与/ with进行比较。
不过，这只是我的猜测--我真正关心的是使用它来修复我的布局。
Stack Overflow用户
发布于 2014-12-17 17:44:41
如果您希望您的布局能够扩展您的需求，请使用以下工具：
layout: {
type: 'vbox',
align: 'stretch'
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/2374440
复制相关文章
相似问题