extjsextjs3

ExtJs Fieldset horizontal align


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


Solution

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