1

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

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

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

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

4

3 回答 3

3

如果您知道单个网格行的高度（取决于您的 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另一方面，该事件只会被触发一次。

于 2012-06-13T09:18:01.147 回答
3

感谢 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()
于 2012-06-13T10:17:32.713 回答
0

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

实用类：

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

});

Ext.grid.Panel 视图监听器：

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();
    }
}
于 2013-09-09T15:15:31.207 回答