Extjs 经典网格面板滚动

Posted 2023-03-06

【中文标题】Extjs 经典网格面板滚动

【英文标题】：Extjs classic grid panel scroll

【发布时间】：2021-01-09 16:59:13

【问题描述】：

Extjs 6.2.0

有这个面板

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,
.....

一列带渲染器

Ext.form.Panel 中带有布局边框的网格。和布局 FIT 的窗口中的 Ext.form.Panel。 Store 就是 MemoryStore

我将记录添加到存储中，然后它显示在网格中。 但是如果我添加超过 50 条记录来存储，我会在网格的底部看到空白空间。 在最后的 Chrome 中，我看到了空白区域。在上一个“Sputnik”浏览器（俄语）中，我没有看到空格

我认为这是错误的滚动条计算。但是怎么解决呢？ 我的头坏了）

【问题讨论】：

您能否在 fiddle.sencha.com 中重现此行为？

嗯。我会尝试，但我认为不会（

示例fiddle.sencha.com/#view/editor&fiddle/391l

【参考方案1】：

在您的网格中将 bufferedRenderer 属性设置为 false..

...
...
/**
 * 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: [
...
...