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