ExtJS 6.0.2 使用 hbox 布局创建具有两个嵌套面板的面板答案

【问题标题】：ExtJS 6.0.2 Create a Panel with two nested Panels using hbox layoutExtJS 6.0.2 使用 hbox 布局创建具有两个嵌套面板的面板
【发布时间】：2020-12-21 09:29:21
【问题描述】：

我正在尝试使用 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]
        });
    }
});

【问题讨论】：

标签： layout extjs scroll panel

【解决方案1】：

我让你成为了一个有用的煎茶小提琴示例：Example

我所做的不同之处在于为表单提供了固定宽度，而父面板具有 flex 值。

这意味着 panel1 的宽度固定为 250 像素。
panel2 有一个 flex: 1 值，将占用父容器的剩余宽度
当具有固定宽度的 panel2 的子项（例如窗体）比 panel1 的 flexed-width 宽时，将出现滚动条。

【讨论】：