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

我让你成为一名工作中的sencha fiddle exmaple：示例

我所做的不同之处在于，在父面板具有弹性值的情况下，为窗体提供固定宽度。

• 这意味着panel1有一个固定的宽度，为250px
• panel2有一个flex:1值，并且将从父容器中获得剩余的可用宽度
• 当具有固定宽度的面板2的子项(例如表单(比面板1的弯曲宽度宽时，将出现滚动条