ExtJS面板有时会冻结

Question

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

（也许截图有助于形象化）：

我们的主要应用程序是我们自己定制的javascript应用程序，我们只是添加一些extJS组件（在这种情况下是网格组件）。

桌子经常冻结（但滚动窗格和文本字段等原生功能不会冻结）。这只发生在我们单击选项卡之间时。这是非常随机的，控制台中没有错误消息，但是我经常在选项卡之间点击4-5次后进行冻结，并进行几次网格排序，并且可能会更改列排序几次。即。我做的东西越多，我就越有可能得到冻结，但是我还没有确定一种模式。

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

也许我设置网格的方式不正确。这是我创建网格和“渲染”的代码。它到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;
},

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

• 是我使用渲染正确吗？
• 我可以使用更好的模式吗？
• 在切换标签后执行 doLayout（）和 refesh（）会是正确的做法吗？

我希望我的一个观点的答案能够解决为什么我偶尔会冻结我的屏幕。

Answer 1

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

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

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

plugins: ['bufferedrenderer'],

让我知道这会对事情产生什么影响。