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

问题描述

我正在尝试使用hBox布局构建一个包含两个组件的面板，一个组件的左侧固定宽度，第二个组件可以并排包含多个表单，并且可以水平滚动。我想在用户滚动第二个组件的同时将第一个组件锁定在适当的位置。 我创建了一个父面板，并在其中嵌套了两个面板，并向面板2添加了scrollable属性，但它似乎不起作用。还有其他布局可以帮助我实现这一目标吗？任何帮助将不胜感激。

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",width: 50
                        }]
                    },{
                        columnWidth: 0.4,title: "2",height: 50,fieldLabel: "Field 2 Label",name: "textvalue"
                        }]
                    },{
                        columnWidth: 0.2,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]
        });
    }
});

解决方法

我让你成为了工作中的煎蛋小品，例如：Example

我所做的不同是在父面板具有flex值的同时给表单固定宽度。

• 这意味着panel1的宽度固定为250px。
• panel2具有flex：1值，并将采用父容器可用的其余宽度
• 当具有固定宽度的panel2的子级（例如表单）宽于panel1的弯曲宽度时，将显示滚动条。