Javascript 如何在视口中拟合栅格并使栅格显示垂直滚动条?
我正在尝试在视口中安装一个网格,该网格看起来很好,但是一旦我获得的记录超过页面所能显示的记录数,一些记录就不再可见,并且没有滚动条显示,但是水平条按预期显示 我已经在IE、Firefox和Chrome上测试过了,我得到了同样的行为,所以我相信我是在误导某种设置Javascript 如何在视口中拟合栅格并使栅格显示垂直滚动条?,javascript,extjs,extjs4,Javascript,Extjs,Extjs4,我正在尝试在视口中安装一个网格,该网格看起来很好,但是一旦我获得的记录超过页面所能显示的记录数,一些记录就不再可见,并且没有滚动条显示,但是水平条按预期显示 我已经在IE、Firefox和Chrome上测试过了,我得到了同样的行为,所以我相信我是在误导某种设置 var grid4 = Ext.create('Ext.grid.Panel', { title: 'My Title', id:'button-grid', store: getLocalStore(),
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
}]
});
谢谢为您的网格面板设置
autoScroll
属性:
autoScroll: true
默认情况下,此属性的值为false。启用此属性会在components layout元素上添加溢出:“auto”,并在必要时自动显示滚动条。您在嵌套网格,或者: a) 使栅格成为视口的第一个子对象。 b) 将布局配合添加到视口的第一个子级
a是更好的选择。这很有效,谢谢。var application=new Ext.Viewport({renderTo:document.body,布局:'fit',autoHeight:true,items:[grid4]}); });