Extjs 经典网格面板滚动

Question

Extjs 6.2.0

Have this panel

Ext.create('Ext.grid.Panel', {
                    region: 'center',
                    padding: 5,
                    reserveScrollbar: false,
                    scrollable: true,
                    columnLines: false,
                    rowLines: false,
                    disableSelection: true,
                    viewConfig: {
                        stripeRows: false,
                        trackOver: false,
                        preserveScrollOnRefresh: true
                    },
                    store: 'chatmessagesstore',
                    hideHeaders: true,
.....

and one column with renderer

Grid in the Ext.form.Panel with layout border. And Ext.form.Panel in window with layout FIT. Store is MemoryStore

I add record to store and then it showing in grid. But if i add more then 50 record to store i see blank space at the buttom of grid. In last Chrome I see blank space. In last "Sputnik" browser (Russian) I do not see blank space

I think that it's wrong scrollbar calculation. But how to solve? My head is broken )

Answer 1

set bufferedRenderer property to false in your grid..

...
...
/**
 * Create chat box
 *
 * @return {Ext.grid.Panel}
 */
createChatBox: function () {
    var me = this;
    if (!me.chatBox) {
        console.log('creating');
        this.chatBox = Ext.create('Ext.grid.Panel', {
            region: 'center',
            padding: 5,
            reserveScrollbar: false,
            scrollable: true,
            columnLines: false,
            rowLines: false,
            disableSelection: true,
            bufferedRenderer: false, // SET IT TO FALSE
            viewConfig: {
                stripeRows: false,
                trackOver: false,
                preserveScrollOnRefresh: true
            },
            store: 'chatmessagesstore',
            hideHeaders: true,
            columns: [{
...
...