ExtJs Fieldset 水平对齐

Question

信息

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 个元素，但这些元素没有宽度，或者当分配宽度时，交互图标显示在元素的左侧

Answer 1

移动到

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",
        },
      ],
    },
  ],
}