在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 }
,字段集将正确呈现,但不会自动调整大小以适应容器,这是我需要的。
有人知道如何修复这个渲染问题吗?谢谢。
发布于 2010-03-24 23:50:28
在我开始显式地设置三个主要的layoutConfig选项之前,我对vbox和hbox有很多问题:
layoutConfig: {
flex: 1,
align: 'stretch',
pack: 'start'
}
从他们的API中读到,在layoutConfig中指定一个' flex‘值听起来类似于一个默认值,但是自从设置了它并且我的布局正确工作后,我开始相信它是一个必填字段,在某种程度上,孩子的flex值会与/ with进行比较。
不过,这只是我的猜测--我真正关心的是使用它来修复我的布局。
发布于 2014-12-17 17:44:41
如果您希望您的布局能够扩展您的需求,请使用以下工具:
layout: {
type: 'vbox',
align: 'stretch'
}
https://stackoverflow.com/questions/2374440
复制相似问题