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

Posted 2023-02-23

【中文标题】ExtJS 6.0.2 使用 hbox 布局创建具有两个嵌套面板的面板

【英文标题】：ExtJS 6.0.2 Create a Panel with two nested Panels using hbox layout

【发布时间】：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]
        );
    
);

【参考方案1】：

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

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

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