ExtJs Fieldset horizontal align

Question

Info

ExtJs Version: 3.4.1

Problem Description

I currently work on a really old, non-updatable project for a small business in extjs-3.4.1. I cannot get a fieldset to align 4 elements [combobox, datefield, timefield, button] in a row.

I seek some help doing it.

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

for some reason all are displayed in a row but none has a width, when I add a width the icons for the corresponding element are displayed wrongly on the left side of the element.

no width: https://imgur.com/a/hXLNq3u

with width set: https://imgur.com/a/CrAOFr3

I tried to align 4 elements in a fieldset horizontally but the elements get no width or when assigned a width, the interaction icons are displayed on the left side of the element

Answer 1

moving to compositefield and using flex got me to the desired result.

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