为啥 Ext.grid.GridPanel 很慢？

Posted 2023-02-26

【中文标题】为啥 Ext.grid.GridPanel 很慢？

【英文标题】：Why Ext.grid.GridPanel is slow?为什么 Ext.grid.GridPanel 很慢？

【发布时间】：2015-12-11 13:31:22

【问题描述】：

我正在使用 Ext.grid.GridPanel，版本 ExtJs3.4。至少需要 6 到 7 秒将 1000 条记录加载到网格中。 我的 java 部分在不到 1 秒的时间内给出了结果，但渲染 需要 6 到 7 秒。 可能是什么问题呢？ 有什么可能的解决方案来提高性能？ 这是我的代码。

var grid = new Ext.grid.GridPanel(
                title:gridtitle,
                border: false,
                height: getGridHeight(),
                autoScroll:true,
                store: store,
                id:'grid',
                colModel: createColModel(gridnoofcols),
                loadMask: true,
                view: new Ext.grid.GroupingView(
                    autoFill:true,
                    groupTextTpl: getGroupConfig(),
                    emptyText: emptytext,deferEmptyText: false
                ),
                listeners: 
                    render : function(grid)
                      grid.store.on('load', function(store, records, options)
                        grid.getSelectionModel().selectFirstRow();       
                      );                      
                    
                   ,
                plugins: [filters],        
                bbar: new Ext.Toolbar(
                )
    );

Following are the Column model

var createColModel = function (finish, start) 
    var columns = [
        new Ext.grid.RowNumberer(
            header: "<span style=font-weight:bold;><%=SLNO%></span>",
            width: 50
        ), 
            dataIndex: 'slnoIndex',
            hidden: true,
            header: "<span style=font-weight:bold;><%=SLNO%></span>",
            filter: 
                type: 'numeric'
            
        , <%=liveVisionColumns.getGridHeaderBuffer(processID,language,checkFDAS).toString()%>
    ];
    return new Ext.grid.ColumnModel(
        columns: columns.slice(start || 0, finish),
        defaults: 
            sortable: true
        
    );

【问题讨论】：

您为什么没有对查询进行分页以填充网格？ Extjs 网格面板与分页配合得很好

我会尝试分页........实际上 Ext.ux.grid.livegrid.GridPanel 比 GridPanel 快，但它有一些问题，如过滤器，如果我们自动加载网格点击标题，但感谢您的宝贵意见。

您对 livegrid 过滤器有任何想法吗？过滤器不适用于 extjs3.4 livegrid？

【参考方案1】：

由于记录数量和分组视图的原因，它可能会很慢。但是，6-7 秒还是太多了。列模型可能是问题所在。列数和渲染器确实会减慢 extjs 网格。尽量避免使用列渲染器。 可以分享一下列模型吗？

【讨论】：

我已经编辑了我的帖子。请调查一下...请让我知道问题

我没有使用列渲染器，但是我的标题是动态的。有什么区别吗？

不，它没有。但是您仍然没有显示“liveVisionColumns.getGridHeaderBuffer”的结果。最后，您能做的最好的事情就是分析您的网格。覆盖 extjs grid_panel 将“console.log”放在里面的某个地方，看看什么需要这么长时间。注意：不分组视图也可以试试看结果吗？

liveVisionColumns.getGridHeaderBuffer header: 'Vehicle No', dataIndex: 'vehiclenoindex', width:100, filter: type:'string ' ,

看起来很简单。正如我所说，你应该分析你的网格。在我 8 年以上的 extjs 经验中，我做了很多次这样的事情，并解决了很多问题:) 只需挖掘网格面板源代码，将其复制到您的项目中，更改类名，将 console.log 添加到渲染方法，然后使用它而不是原始组件。