[英]Ext-JS GridPanel Dynamic Height Based on Row Count
I'm facing a dilemma working with an Ext-JS GridPanel: the data used to load its store is dynamic so I don't know beforehand how many rows will need to be shown on the grid. 我在使用Ext-JS GridPanel时遇到了一个难题:用于加载其存储的数据是动态的,因此我事先不知道网格上需要显示多少行。
As such, I'm having a hard time with the grid's height: I've tried setting autoHeight to true but the grid will only display the first row, hiding the rest; 因此,我对网格的高度感到困难:我尝试将autoHeight设置为true,但是网格将仅显示第一行,而隐藏其余行; when I set its height explicitly, white space appears on the grid if the number of rows doesn't fill the space specified by the height.
当我显式设置其高度时,如果行数未填充高度指定的空间,则在网格上会出现空白。
Ideally, the grid should expand/shrink vertically to show all of its rows. 理想情况下,网格应垂直扩展/缩小以显示其所有行。 Is there any way to make the grid's height dynamic, based on the number of rows it'll contain?
有什么方法可以根据网格将包含的行数来使网格的高度动态化吗?
I could wait for the grid to render, get a count of rows and recalculate the grid's height based on that but it seems hacky and I'm looking for something cleaner. 我可以等待网格渲染,获取行数,并据此重新计算网格的高度,但这似乎很麻烦,我正在寻找更清洁的东西。
This is my code for reference: 这是我的代码供参考:
var store = new Ext.data.ArrayStore({fields:[{name: 'sign_up_date'}, {name: 'business_name'}, {name: 'owner_name'}, {name: 'status'}]});
// buildResultsArray is a method that returns arrays of varying lengths based on some business logic. The arrays can contain no elements or up to 15
store.loadData(buildResultsArray());
var resultsGrid = new Ext.grid.GridPanel({
store: store,
columns: [
{id: "sign_up_date", header: "Sign Up Date", dataIndex: "sign_up_date", width: 70},
{id: "business_name", header: "Business Name", dataIndex: "business_name", width: 100},
{id: "owner_name",header: "Owner Name", dataIndex: "owner_name", width: 100},
{id: "status", header: "Sign Up Status", dataIndex: "status", width: 70}
],
stripeRows: true,
columnLines: true,
enableColumnHide: false,
enableColumnMove: false,
enableHdMenu: false,
id: "results_grid",
renderTo: "results_grid_div",
//height: 300,
autoHeight: true,
selModel: new Ext.grid.RowSelectionModel({singleSelect: false})
});
Thanks for the help. 谢谢您的帮助。
In ExtJS 3 it's not working out-of-box, but it's easy to implement by extending GridView: 在ExtJS 3中,它不是开箱即用的,但是通过扩展GridView可以很容易地实现:
AutoGridView = Ext.extend(
Ext.grid.GridView,
{
fixOverflow: function() {
if (this.grid.autoHeight === true || this.autoHeight === true){
Ext.get(this.innerHd).setStyle("float", "none");
this.scroller.setStyle("overflow-x", this.scroller.getWidth() < this.mainBody.getWidth() ? "scroll" : "auto");
}
},
layout: function () {
AutoGridView.superclass.layout.call(this);
this.fixOverflow();
},
render: function(){
AutoGridView.superclass.render.apply(this, arguments);
this.scroller.on('resize', this.fixOverflow, this);
if (this.grid.autoHeight === true || this.autoHeight === true){
this.grid.getStore().on('datachanged', function(){
if (this.ownerCt) { this.ownerCt.doLayout(); }
}, this.grid, { delay: 10 });
}
}
}
);
Usage: 用法:
new Ext.grid.GridPanel({
autoHeight: true,
view: new AutoGridView()
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.