ExtJS grid panel: Load as many items as fit on the screen

Question

I have a ExtJS Grid panel with a pagination toolbar.

My problem is: I can only specify a static limit. This is not what I want, because screens have different resolutions, and the grid panel automatically stretches to fit the screen.

Now I can either set the amount of items to load very high. But this would force users with a smaller screen to scroll.

Or I could set it to fit a medium screen. But is there a way to let ExtJS automatically calculate how many items it can fit on one page and load them?

Answer 1

Thanks to Stefan Gehrigs comment, I came up with this:

# 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 2

If you know the height of a single grid row (depending on your CSS) you can calculate the number of rows yourself - I think that is the only option.

Sample code (untested):

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();
});

EDIT

As indicated by Sebastian Hoitz the resize event is the better event to listen for because it will re-fire on resizing the browser window for example. The afterrender event on the other hand will be fired only once.

Answer 3

Your constants might change based on whether you restructure your components on the Viewport. In this case, I just included one constant/variable named "ROW_HEIGHT". The goal is to eliminate the vertical scroll bar in all cases, no matter which device the MVC application is viewed on (ie: iPhone, Android, iPad, Android Tablet, Mac, PC, etc...). In ExtJS 4.2, I've found that a value of 21 creates a scroll bar if the resolution gets too small or the size of the browser gets smaller. Having too small of a value (like 20) will give a blank row in some situations at the bottom of the grid. I've found 21.1 to be the Goldilox height if you just have the default grid with no themes applied, and you're inheriting (extending) the standard Ext.grid.Panel component. So change according to your test cases for your application.

Utilities class:

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

});

Ext.grid.Panel view 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();
    }
}