ExtJS 6.0.2 Create a Panel with two nested Panels using hbox layout

Question

I am trying to build a panel with two components using hbox layout, one of fixed width on the left, the second would contain multiple forms side by side and should be horizontally scrollable. I want to keep first component locked in place, while the user scrolls the second component. I created a parent Panel and nested two panels within it, and added scrollable property to Panel 2 but it doesn't seem to work. Are there any other layouts that would help me achieve this ? Any help would be appreciated.

Ext.application({
    name: 'Fiddle',

    launch: function () {
        var panel2 = Ext.create('Ext.Panel', {
            width: 1000,
            scrollable: 'x',
            title: "Panel2",
            items: [{
                xtype: "form",
                items: [{
                    layout: "column",
                    items: [{
                        columnWidth: 0.4,
                        layout: "form",
                        title: "1",
                        items: [{
                            xtype: "textfield",
                            fieldLabel: "My Label",
                            name: "textvalue",
                            align: "center",
                            width: 50
                        }, {
                            xtype: "textfield",
                            fieldLabel: "My Label",
                            name: "textvalue",
                            align: "center",
                            width: 50
                        }, {
                            xtype: "textfield",
                            fieldLabel: "My Label",
                            name: "textvalue",
                            align: "center",
                            width: 50
                        }, {
                            xtype: "textfield",
                            fieldLabel: "My Label",
                            name: "textvalue",
                            align: "center",
                            width: 50
                        }]
                    }, {
                        columnWidth: 0.4,
                        layout: "form",
                        title: "2",
                        height: 50,
                        items: [{
                            xtype: "textfield",
                            fieldLabel: "Field 2 Label",
                            name: "textvalue"
                        }]
                    }, {
                        columnWidth: 0.2,
                        layout: "form",
                        title: "3",
                        items: [{
                            xtype: "checkbox",
                            fieldLabel: "Label",
                            boxLabel: "Box label",
                            name: "checkbox",
                            inputValue: "cbvalue"
                        }]
                    }]
                }]
            }]
        });

        var panel1 = Ext.create('Ext.Panel', {
            width: 250,
            title: "Panel1"
        });

        var parentPanel = Ext.create('Ext.Panel', {
            renderTo: document.body,
            width: 500,
            // scrollable: 'x',
            layout: 'hbox',
            items: [panel1, panel2]
        });
    }
});

KaMun KaMun · Accepted Answer · 2020-09-02T12:03:34

I'm made you a working sencha fiddle exmaple: Example

What I did different was giving the form the fixed width while the parent panel has a flex value.

That means panel1 has a fixed width with 250px.
panel2 has a flex: 1 value and will take the rest of the width available from the parent Container
When the childs of panel2 (e.g. the forms) that have fixed width are wider than the flexed-width of panel1, the scroller will appear.

ExtJS 6.0.2 Create a Panel with two nested Panels using hbox layout

1 Answers