如何解决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的弯曲宽度时,将显示滚动条。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。