![](/img/trans.png)
[英]How do I change height if I have content in a website within a visible viewport, no scrollbar in body?
[英]How do I fit a grid within a viewport and have the grid display a vertical scrollbar?
我正在尝试在视口中放入一个看起来不错的网格,但是,一旦我获得的记录多于该页面可以显示的记录,某些记录将不再可见,并且滚动条也不会显示,但是水平栏是否按预期显示了?
我已经在IE,Firefox和Chrome浏览器中对此进行了测试,并且得到了相同的行为,所以我相信自己会错失某种设置。
var grid4 = Ext.create('Ext.grid.Panel', {
title: 'My Title',
id:'button-grid',
store: getLocalStore(),
layout:'fit',
columns: [
{ text : 'A', width: 50,dataIndex: 'a', sortable: true},
{ text : 'B',flex: 1, dataIndex: 'b', sortable: true},
{ text : 'C Name',width: 120, dataIndex: 'c', sortable: true},
{ text : 'D',width: 100, dataIndex: 'd', sortable: true},
{ text : 'E',width: 50, dataIndex: 'e', sortable: true},
{ text : 'F',width: 70, dataIndex: 'f', sortable: true},
{ text : 'G info',width: 60, dataIndex: 'g', sortable: true},
{ text : 'H Address',flex: 1, dataIndex: 'h', sortable: true},
{ text : 'I',width: 80, dataIndex: 'i', sortable: true},
{ text : 'J by',width: 80, dataIndex: 'j', sortable: true},
{ text : 'K Date',width: 90, dataIndex: 'k', sortable: true}
],
columnLines: true,
selModel: selModel,
iconCls: 'icon-grid',
// inline buttons
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
ui: 'footer',
layout: {
pack: 'center'
},
items: [{
minWidth: 80,
text: 'remove'
},{
minWidth: 80,
text: 'Disable'
}]
}, {
xtype: 'toolbar',
items: [{
text:'Click here',
tooltip:'Add a new row',
iconCls:'add',
handler : function(){
win.show();
}
}]
}]
});
// viewport
Ext.onReady(function(){
Ext.QuickTips.init();
var application = new Ext.Viewport({
renderTo: document.body,
layout:'fit',
items: [{
region: 'center',
frame: true,
border: false,
items: grid4
}]
});
谢谢
您过度嵌套了网格,或者:
a)使网格成为视口的第一个子项。 b)向视口的第一个子项添加适合的布局。
一个是更好的选择。
为您的网格面板设置autoScroll
属性:
autoScroll: true
默认情况下,此属性的值为false。 启用此属性会在组件布局元素上添加overflow:'auto',并在必要时自动显示滚动条。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.