我正在尝试实现特定的布局。到目前为止我的努力可以从fiddle example预览。
基本上我需要使用红色边框容器制作左侧容器(fixedContainer
),以便在水平滚动时具有固定位置并完全可见。但是当我垂直滚动时,它需要正常滚动其余的容器。
当前代码:
Ext.create('Ext.window.Window', {
title: 'Hello',
height: 500,
width: 700,
layout:'vbox',
scrollable:true,
items:[{
xtype:'container',
reference:'mainContainer',
layout:{
type:'hbox'
},
margin:10,
items:[{
xtype:'container',
reference:'fixedContainer',
style:'position:relative;',
defaults:{
style:'border: 1px solid red;',
left:100,
width:200,
height:120,
bodyPadding:10
},
items:[{
html:'panel1'
},{
html:'panel2'
},{
html:'panel3'
},{
html:'panel4'
}]
},{
xtype:'container',
reference:'scrollContainer',
defaults:{
border:true,
width:700,
height:120,
bodyPadding:10
},
items:[{
html:'panel1'
},{
html:'panel2'
},{
html:'panel3'
},{
html:'panel4'
}]
}]
}]
}).show();
答案 0 :(得分:0)
如果我了解您要查找的内容,则需要更改代码中的一些布局。首先,您需要将窗口设为layout: 'fit'
,以使其适合窗口容器。
然后将mainContainer
设置为layout: border
,并将子面板分别设置为region: 'west'
和region: 'center'
。这会将您的fixedContainer
固定在左侧,将scrollableContainer
固定在中心位置。
最后,将scrollable: "horizontal"
属性添加到scrollableContainer
以水平滚动。
Ext.create('Ext.window.Window', {
title: 'Hello',
height: 500,
width: 700,
layout: 'fit', // Changed this
scrollable:true,
items:[
{
xtype:'container',
reference:'mainContainer',
layout: 'border', // Changed this
margin:10,
items:[
{
xtype:'container',
region:'west', // Added this
reference:'fixedContainer',
defaults:{
style:'border: 1px solid red',
width:200,
height:120,
bodyPadding:10
},
items:[{
html:'panel1'
},{
html:'panel2'
},{
html:'panel3'
},{
html:'panel4'
}]
},
{
xtype:'container',
region: 'center', // Added this
scrollable: "horizontal", // Added this
reference:'scrollContainer',
defaults:{
border:true,
width:700,
height:120,
bodyPadding:10
},
items:[{
html:'panel1'
},{
html:'panel2'
},{
html:'panel3'
},{
html:'panel4'
}]
}
]
}]
}).show();
<强> EDIT1:强>
正如@Evan Trimboli所说,第一个代码示例不尊重面板溢出的垂直滚动,第二个示例将边框布局设置为垂直滚动。 scrollContainer
被包装到另一个容器中,该容器将满足垂直滚动。其余代码与初始答案保持不变。
Ext.create('Ext.window.Window', {
title: 'Hello',
height: 500,
width: 700,
layout: 'fit', // Changed this
items: [{
xtype: 'container',
reference: 'mainContainer',
scrollable: 'vertical', // #edit1: Added this
layout: 'border', // Changed this
margin: 10,
items: [{
xtype: 'container',
region: 'west', // Added this
reference: 'fixedContainer',
defaults: {
style: 'border: 1px solid red',
width: 200,
height: 120,
bodyPadding: 10
},
items: [{
html: 'panel1'
}, {
html: 'panel2'
}, {
html: 'panel3'
}, {
html: 'panel4'
}, {
html: 'panel5'
}]
}, {
xtype: 'container', //#edit1: New container here to satisfy the vertical scroll
region: 'center',
items: [{
xtype: 'container',
scrollable: "horizontal", // Added this
reference: 'scrollContainer',
defaults: {
border: true,
width: 700,
height: 120,
bodyPadding: 10
},
items: [{
html: 'panel1'
}, {
html: 'panel2'
}, {
html: 'panel3'
}, {
html: 'panel4'
}, {
html: 'panel5'
}]
}]
}]
}]
}).show();
答案 1 :(得分:-1)
好的,这是我解决此问题的解决方案
Ext.application({
name: 'Fiddle',
launch: function () {
var horizontalScroll = 0
var gridwindow = Ext.create('Ext.window.Window', {
referenceHolder: true,
title: 'Hello',
height: 500,
width: 700,
layout: 'vbox',
scrollable: true,
items: [{
xtype: 'container',
reference: 'mainContainer',
layout: {
type: 'hbox'
},
margin: 10,
items: [{
xtype: 'container',
reference: 'fixedContainer',
style: 'position:relative; z-index:10; box-shadow: -20px 0px 0px 1px #fff;',
defaults: {
style: 'border: 1px solid red; outline',
width: 200,
height: 120,
bodyPadding: 10
},
items: [{
html: 'panel1'
}, {
html: 'panel2'
}, {
html: 'panel3'
}, {
html: 'panel4'
}]
}, {
xtype: 'container',
reference: 'scrollContainer',
defaults: {
border: true,
width: 700,
height: 120,
bodyPadding: 10
},
items: [{
html: 'panel1'
}, {
html: 'panel2'
}, {
html: 'panel3'
}, {
html: 'panel4'
}]
}]
}]
}).show();
gridwindow.body.on('scroll', function (event) {
var scrollLeft = event.target.scrollLeft;
if (horizontalScroll !== scrollLeft) {
var fixedContainer = this.lookup('fixedContainer');
fixedContainer.el.translate((scrollLeft), 0)
}
horizontalScroll = scrollLeft;
}, gridwindow);
}
});
https://fiddle.sencha.com/#view/editor&fiddle/28ug
感谢所有人的努力。希望这足以帮助其他有类似问题的人。