Question

我有一个带分页工具栏的ExtJS Grid面板。

我的问题是：我只能指定静态限制。这不是我想要的，因为屏幕具有不同的分辨率，并且网格面板会自动拉伸以适应屏幕。

现在我可以设置加载非常高的项目数量。但这会迫使用户使用较小的屏幕进行滚动。

或者我可以将它设置为适合中等屏幕。但有没有办法让ExtJS自动计算一页上可以容纳多少项并加载它们？

Answer 1

如果您知道单个网格行的高度（取决于您的CSS），您可以自己计算行数 - 我认为这是唯一的选择。

示例代码（未经测试）：

var rowHeight = 28;
var grid = ... // initialize the grid
grid.on('afterrender', function(g) {
    var height = g.body.getHeight(true),
        rows = Math.floor(height / rowHeight);
    g.getStore().pageSize = rows;
    g.getStore().load();
});

修改

如Sebastian Hoitz所示，resize事件是更好的事件，因为它会在调整浏览器窗口大小时重新启动。另一方面，afterrender事件只会被触发一次。

Answer 2

感谢Stefan Gehrigs的评论，我提出了这个问题：

# Adjust the page size of our store
@on "resize", (grid, width, height) =>
    rowHeight = 21

    if @title
        height -= 23 # Title row

    height -= 27 # toolbar height
    height -= 27

    height -= 27 # Pagination

    height -= 25 # Grid title

    rows = Math.floor(height / rowHeight)

    grid.getStore().pageSize = rows
    grid.getStore().load()

Answer 3

您的常量可能会根据您是否在Viewport上重构组件而更改。在这种情况下，我只包含一个名为“ROW_HEIGHT”的常量/变量。目标是在所有情况下消除垂直滚动条，无论在哪个设备上查看MVC应用程序（即：iPhone，Android，iPad，Android平板电脑，Mac，PC等......）。在ExtJS 4.2中，我发现如果分辨率太小或浏览器的大小变小，则值21会创建一个滚动条。如果值太小（如20），则会在网格底部的某些情况下显示空白行。我发现21.1是Goldilox高度，如果你只有没有应用主题的默认网格，并且你继承（扩展）标准的Ext.grid.Panel组件。因此，根据您的应用程序的测试用例进行更改。

公用事业类：

Ext.define('App.Utilities', {
    statics: {
        APP_NAME: 'MVC',
        ROW_HEIGHT: 21.1
    }

});

Ext.grid.Panel查看lisenters：

listeners: {
    resize: function(view, width, height, oldWidth, oldHeight, eOpts) {
        height = this.body.getHeight(true);       
        var rows = Math.floor(height / App.Utilities.ROW_HEIGHT);
        view.getStore().pageSize = rows;
        view.getStore().load();
    }
}

ExtJS网格面板：在屏幕上加载适合的项目

3 个答案: