Auto size page in ExtJS grid.

Yesterday I was looking for solution to auto size page in grid, but have found not usable solutions and also for old ExtJS version. Then I've tried itself and got this:

You can declare simple two listener in your grid

Ext.define('app.view.main.List', {
    extend: 'Ext.grid.Panel',

    controller: 'list',

...

    listeners: {
     afterrender: 'onAfterRender',
     resize: 'onGridResize'
    }
});

and implement it in controller:

Ext.define('app.view.main.ListController', {
    extend : 'Ext.app.ViewController',
    alias : 'controller.list',

    onAfterRender: function(grid) {
        this.calcPageSize(grid);
    },
 
    onGridResize: function(grid) {
        this.calcPageSize(grid);
    },
 
    calcPageSize(grid) {
        var me = this,
            bodyHeight = grid.body.dom.clientHeight,
            hasLines = grid.rowLines,
            view = grid.getView(),
            row = view.getRow(0),
            // if there is now rows - assume row height 33 pixel
            rowHeight = row ? row.offsetHeight + (hasLines ? 1 : 0) : 33,
            store = grid.getStore(),
            currPageSize = store.getPageSize(),
            newPageSize = Math.floor(bodyHeight/rowHeight);
        if (bodyHeight == 0) {
            Ext.defer(function() {
                me.onGridResize(grid);
            }, 200);
            return;
        }
        if (currPageSize != newPageSize) {
            store.setPageSize(newPageSize);
            // if store loaded - reload them
            if (store.isLoaded()) {
                store.load();
            }
        }
    },
 
...

});

or you can create your own class:

Ext.define('Ext.ux.grid.AutoSizeGrid', {
    extend: 'Ext.grid.Panel',
    xtype: 'autoPageSize',

    initComponent: function() {
        var me = this;
        me.mon(grid, 'resize', me.onGridResize, me);
        me.mon(grid, 'afterrender', me.onAfterRender, me);
        me.callParent(arguments);
    },

    onAfterRender: function(grid) {
        this.calcPageSize(grid);
    },
 
    onGridResize: function(grid) {
        this.calcPageSize(grid);
    },
 
    calcPageSize(grid) {
        var me = this,
            bodyHeight = grid.body.dom.clientHeight,
            hasLines = grid.rowLines,
            view = grid.getView(),
            row = view.getRow(0),
            // if there is now rows - assume row height 33 pixel
            rowHeight = row ? row.offsetHeight + (hasLines ? 1 : 0) : 33,
            store = grid.getStore(),
            currPageSize = store.getPageSize(),
            newPageSize = Math.floor(bodyHeight/rowHeight);
        if (bodyHeight == 0) {
            Ext.defer(function() {
                me.onGridResize(grid);
            }, 200);
            return;
        }
        if (currPageSize != newPageSize) {
            store.setPageSize(newPageSize);
            // if store loaded - reload them
            if (store.isLoaded()) {
                store.load();
            }
        }
    }
});

You can see the example here https://fiddle.sencha.com/#view/editor&fiddle/29vf
Enjoy!