ExtJs Version: 3.4.1
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
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",
},
],
},
],
}