Layout ExtJS 6.0.2使用hbox布局创建包含两个嵌套面板的面板

我正在尝试使用hbox布局构建一个包含两个组件的面板，其中一个在左侧具有固定宽度，第二个将包含多个并排的表单，并且应该可以水平滚动。我希望在用户滚动第二个组件时，将第一个组件锁定到位。 我创建了一个父面板，在其中嵌套了两个面板，并向面板2添加了可滚动属性，但它似乎不起作用。有没有其他布局可以帮助我实现这一点？任何帮助都将不胜感激

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]
        });
    }
});

---

我给你做了一把工作用的sencha小提琴：

我所做的不同之处在于，当父面板有一个flex值时，为窗体提供固定的宽度

• 这意味着panel1的固定宽度为250px
• panel2有一个flex:1值，将使用父容器中可用的剩余宽度
• 当具有固定宽度的panel2的Child（例如表单）比panel1的弯曲宽度宽时，将出现滚动条