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

Question

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

Answer 1

我给你做了一个可以工作的煎茶 fiddle 例子：Example

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

这意味着 panel1 的宽度固定为 250px。
panel2 有一个 flex: 1 值，并将占用父 Container 可用的其余宽度
当 panel2 的固定宽度的子项（例如表单）比 panel1 的 flexed-width 宽时，将出现滚动条。

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

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

layout

scroll

extjs

panel