javascript - ExtJS 面板有时会卡住

Question

我有一个应用程序，其中选项卡式 Pane 中的每个选项卡后面都有一个 extJS 网格。

(也许屏幕截图有助于可视化):

我们的主要应用程序是我们自己定制的 JavaScript 应用程序，我们只是添加一些 extJS 组件(在本例中为网格组件)。

表格经常会卡住(但是滚动 Pane 和文本字段等 native 功能不会卡住)。仅当我们在选项卡之间单击时才会发生这种情况。它是非常随机的，并且控制台中没有错误消息，但我通常会在选项卡之间单击大约 4-5 次，并进行一些网格排序，并且可能更改几次列排序后，会出现卡住。 IE。我做的事情越多，我就越有可能出现这种卡住，但我还没有确定一种模式。

最初我认为我配置网格的方式有问题，但它似乎是在面板级别(而不是网格级别)。

也许我设置网格的方式不正确。这是我创建网格并将其“渲染”到 DIV 的代码:

/**
 * onActive method for a Page. When the page is displayed this is first called.
 *
 * A null check needs to be done first to determine whether the component is created.
 *
 */
onActive : function () {

    var pageDivs = Ext.select('div .Page');

    var paveDIV = pageDivs.elements[0];

    if (!this.tablePanel) {

        Util.logInfo("creating new table panel")

        //create component
        this.tablePanel = this.createTablePanel();

        //add it to the DIV
        this.tablePanel.render(paveDIV);

        //load data
        this.loadPackageAllData();
    }

    this.tablePanel.doLayout();
    this.tablePanel.getView().refresh();
},

createTablePanel : function () {

    var _self = this;
    this.packageGrid = Ext.create('js.grid.PackageGrid', {

        width: '979px',
        height: '400px',
        layout: 'fit',
        margin: '5px',
        flex: 1,

        listeners: {
            itemdblclick : function(selModel, record, index, options){
                _self.showDetailView(record.data.id);
            }
        },
        aditionalToolbarItems: _self.aditionalToolbarItems

    });

    return this.packageGrid;
},

这是一种延迟加载 - 即。如果它已经创建，那么只需使用旧的引用。

• 我对 render 的使用正确吗？
• 我可以使用更好的模式吗？
• 在切换标签页后执行 doLayout() 和 refesh() 是正确的做法吗？

我希望我的一个观点的答案能够澄清为什么我的屏幕偶尔会卡住。

Answer 1

如果数据没有变化，您不需要刷新网格...

我可能会首先将缓冲渲染器插件添加到网格中，因为看起来有大量的行。该插件只是在需要时才将项目渲染到 DOM - 减少延迟。

因此，在网格代码中添加以下内容:

插件:['bufferedrenderer']，

让我知道这会如何影响事情(如果有的话)。