extjs 布局在 vbox 内滚动
extjs layout scroll inside vbox
我在向 vbox 容器内部的网格添加滚动条时遇到问题。我不能直接分配高度,因为我不知道。在该vbox容器中,还有未定义高度的"另一个内容",因此我既不能使用"高度",也不能使用"flex"。我需要让网格填充页面中的所有剩余空间,如果行数超过其容纳范围 - 我需要向该网格添加滚动条。这是代码中最重要的部分:
{
layout: {
type: 'vbox',
align: 'stretch'
},
items:[
{
title: 'center'
},{
html: 'another content'
},{
xtype: 'grid',
autoScroll: true, // <-- this is not working
columns: [
{ text: 'User', dataIndex: 'userId' }
],
store: new Ext.data.Store({
model: 'Ext.data.Record',
fields: [
{ name: 'userId', type: 'string' }
],
data: ( function(){
var res = []
for(var i=0; i<1000; i++){
res.push({ userId: 'User'+i});
}
return res;
})()
})
}
]
}
我尝试了很多变体,但没有成功。我还为大多数逻辑解决方案准备了一些小提琴(但无论如何滚动在那里不起作用):
https://fiddle.sencha.com/#fiddle/fmohttps://fiddle.sencha.com/#fiddle/fmp
任何帮助都会很好。
只需删除autoScroll: true
并将其替换为 flex: 1
即可。
https://fiddle.sencha.com/#fiddle/fms
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.container.Viewport', {
renderTo: Ext.getBody(),
layout: {
type: 'border'
},
items: [
{
width: '100%',
region: 'north',
items: [{
title: 'north'
},{
html: 'another content'
}]
},
{
region: 'center',
layout: 'fit',
items: [{
layout: {
type: 'vbox',
align: 'stretch'
},
items:[
{
title: 'center'
},{
html: 'another content'
},{
xtype: 'grid',
flex: 1,
columns: [
{ text: 'User', dataIndex: 'userId' }
],
store: new Ext.data.Store({
model: 'Ext.data.Record',
fields: [
{ name: 'userId', type: 'string' }
],
data: ( function(){
var res = []
for(var i=0; i<1000; i++){
res.push({ userId: 'User'+i});
}
return res;
})()
})
}
]
}
]
}]
});
}
});
相关文章:
- 幻灯片滚动javascript不起作用
- 将视口底部滚动到元素底部
- jQuery Lazy加载动画滚动
- 设置滑块分区上的滚动
- 结合jQuery和jetpack无限滚动
- 单击顶部导航时如何进行向下滚动效果(向下滑动).
- 滚动到容器中的下一个元素-几乎到了
- 只覆盖箭头键滚动事件
- Javascript如何找到滚动事件的来源
- Image赢得't隐藏在滚动jQuery上
- Safari(Mac OS)上的jQuery平滑滚动问题
- CSS-若窗口太小,滚动条会出现在“表格”单元格上
- 禁用(而不是隐藏)浏览器滚动条
- JavaScript上下滚动不可预测
- 滚动和表格
- 谷歌地图劫持了iphone's滚动(触摸事件)-如何恢复
- 我希望只有在我滚动页面后才能显示我的返回页首图标
- 循环滚动数组
- 滚动以修复向上滚动的问题
- extjs 布局在 vbox 内滚动