ExtJs Fieldset 水平对齐

问题描述 投票:0回答:1

信息

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

extjs extjs3
1个回答
0
投票

移动到

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",
        },
      ],
    },
  ],
}
© www.soinside.com 2019 - 2024. All rights reserved.