ExtJs版本:3.4.1
我目前正在为
extjs-3.4.1
的一家小企业开发一个非常旧的、不可更新的项目。
我无法获得字段集来连续对齐 4 个元素 [组合框、日期字段、时间字段、按钮]。
我寻求一些帮助来做到这一点。
{
xtype: "fieldset",
itemId: "fieldID",
title: "fieldsetTitle",
labelWidth: 110,
items: [
{
xtype: "container",
layout: "hbox",
items: [
{
xtype: "combo",
itemId: "comboID",
editable: false,
mode: "local",
store: "storeCombo",
triggerAction: "all",
},
{
xtype: "datefield",
itemId: "...",
},
{
xtype: "timefield",
itemId: "...",
},
{
xtype: "button",
itemId: "...",
text: "confirm",
},
{
xtype: "textfield",
hidden: true,
itemId: "...",
name: "...",
},
],
},
],
}
由于某种原因,所有元素都显示在一行中,但没有一个有
width
,当我添加width
时,相应元素的图标错误地显示在元素的左侧。
无宽度:https://imgur.com/a/hXLNq3u
设置宽度:https://imgur.com/a/CrAOFr3
我尝试水平对齐字段集中的 4 个元素,但这些元素没有宽度,或者当分配宽度时,交互图标显示在元素的左侧
移动到
compositefield
并使用 flex
让我得到了想要的结果。
{
xtype: "fieldset",
labelWidth: 110,
items: [
{
xtype: "container",
layout: "hbox",
items: [
{
xtype: "compositefield",
flex: 3,
items: [
{
xtype: "combo",
flex: 2,
},
{
xtype: "datefield",
flex: 1,
},
{
xtype: "timefield",
flex: 1,
},
],
},
{
xtype: "button",
flex: 1,
margins: "0 0 0 15",
text: "confirm",
},
],
},
],
}