node.js - 分机JS : TabPanel rendering Infinite Grid too quickly

Question

假设我有一个 TabPanel，其中添加了两个组件。每个组件都包含一个无限网格。每个无限网格从服务调用加载其数据，每组数据包含 2,000 条记录。将组件添加到 TabPanel 后，我们使用 setActiveTab 将每个组件设置为事件选项卡。 。我们首先将第二个选项卡设置为事件选项卡，然后设置第一个选项卡。当页面加载时，如我们所料，第一个选项卡被选中。

当查看第一个选项卡时，一切看起来都很好...我们可以无限滚动、排序、隐藏列等。但是，如果我们切换到第二个选项卡，我们会看到它已部分加载，并且我们无法滚动经过已加载的 x 记录、隐藏列、排序等。这几乎就好像使用 setActiveTab 渲染网格有点过早...就好像商店未完全加载，但选项卡无论如何都已渲染。 (这就是我假设的问题所在)

我确实有代码，但您需要做一些工作才能重现(因为您需要服务调用)。我在 Node.js 应用程序中使用CompoundJS，因此创建测试用例对我来说非常容易。如果您可以访问数据库，并且可以进行快速服务调用，只需修改我的 Ext JS 代码，但如果您想使用 Node.js，您可以尝试以下操作:

Ext JS 4.2.1

Ext.onReady(function() {
  var tabPanel = Ext.create('Ext.tab.Panel', {
    width: 400,
    height: 400,
    renderTo: Ext.getBody()
  });

  Ext.define('myGrid', {
    extend: 'Ext.grid.Panel',
    constructor: function(config) {
      this.columns = config.columns;
      this.store = Ext.create('Ext.data.Store', {
        fields: config.fields,
        buffered: true,
        leadingBufferZone: 20,
        pageSize: 50,
        proxy: {
          type: 'ajax',
          url: '/getData?id=' + config.id,
          reader: {
            totalProperty: 'totalCount',
            type: 'json',
            root: 'root'
          }
        },
        autoLoad: true
      });
      this.id = config.id;
      this.callParent();
    }
  });

  var grid1 = Ext.create('myGrid', {
    id: 'blah',
    columns: [{
      text: 'one',
      dataIndex: 'one'
    }, {
      text: 'two',
      dataIndex: 'two'
    }, {
      text: 'three',
      dataIndex: 'three'
    }],
    fields: ['one', 'two', 'three'],
    title: 'grid1'
  });

  var grid2 = Ext.create('myGrid', {
    id: 'bleh',
    columns: [{
      text: 'one',
      dataIndex: 'one'
    }, {
      text: 'two',
      dataIndex: 'two'
    }, {
      text: 'three',
      dataIndex: 'three'
    }],
    fields: ['one', 'two', 'three'],
    title: 'grid2'
  });

  var c1 = [];
  c1.items = [grid1];
  c1.title = "BLAH";
  c1.layout = 'fit';
  var c2 = [];
  c2.items = [grid2];
  c2.title = "BLEH";
  c2.layout = "fit";
  tabPanel.add([c1, c2]);
  tabPanel.setActiveTab(1);
  tabPanel.setActiveTab(0);
});

Node.js 代码

compound init test && cd test
npm install
compound g s testcontroller

将 app/controllers/testcontrollers_controller.js 替换为:

load('application');

action('getData', function(data) {
  var query = data.req.query;
  var id = query.id;
  var page = query.page;
  var pushObj;
  if (id === 'blah') {
    pushObj = {
      one: 'bye',
      two: 'goodbye',
      three: 'auf wiedersehen'
    };
  }
  else {
    pushObj = {
      one: 'hi',
      two: 'hello',
      three: 'guten tag'
    };
  }
  var obj = [];
  for (var i = 0; i < 50; i++) {
    obj.push(pushObj);
  }
  send({
    totalCount: 2000,
    root: obj,
    page: page
  });
});

在config/routes.js中，删除testcontroller的map.resources行，并添加以下内容:

map.get('getData', 'testcontrollers#getData');

在 public/index.html 中，将其设为通用 HTML 文件，然后添加指向 Ext JS 和我上面的 Ext JS 代码的链接。

现在，完成所有这些操作后，您应该能够重现我的问题。第一个选项卡将打开并且正常，但第二个选项卡仅加载前 x 条记录并且无法正常工作。我相信这是因为在 setActiveTab 被触发时存储没有完全加载，这使得渲染加载一个公正的存储。

我想知道的是，如何才能使其正常工作？我尝试等待商店加载，然后将其添加到选项卡，但这仍然给我不一致的结果，并尝试等待网格停止渲染，但仍然得到不一致的结果...不一致的含义，有时网格一路加载，选项卡很好，但其他时候，我得到 cannot read property 'length' of undefined in ext-all-dev.js:135,786...这使得商店看起来没有完全加载，因为该行包含对 records.length 的引用。

如果有人有任何想法，我很想听听!交叉发布自the Sencha forums .

编辑:感谢@rixo，我能够在 this example 中重现该问题。如果启用 Firebug，您将看到有关未定义属性长度的错误，如我上面所述。

Answer 1

我追踪到该问题是插件在隐藏时缓存了不正确的大小值。

这是一个可以修复此行为的覆盖:

/**
 * Prevents BufferedRenderer plugin to break when buffered views are
 * rendered or refreshed while hidden, like in a card layout.
 *
 * Tested with Ext 4.2.1
 */
Ext.define('Ext.ux.Ext.grid.plugin.BufferedRenderer.HiddenRenderingSupport', {
    override: 'Ext.grid.plugin.BufferedRenderer'

    /**
     * Refreshes the view and row size caches if they have a value of 0
     * (meaning they have probably been cached when the view was not visible).
     */
    ,onViewResize: function() {
        if (this.rowHeight === 0) {
            if (this.view.body.getHeight() > 0) {
                this.view.refresh();
            }
        } else {
            this.callParent(arguments);
        }
    }
});

话虽这么说，我建议不要使用它并不必要地膨胀您的代码库。

您应该以一种避免这种情况的方式组织代码。该问题是由于您在同一执行帧中多次调用 setActiveTab 造成的。如果你避免这种情况，Ext 将自行正确处理这种情况。

作为一般原则，您应该尝试使您的 Ext 代码更具声明性...Ext 架构更希望您构建大型配置对象来立即创建组件(允许原子 DOM 更新等)，并使用仅稍后更新状态的方法来驱动组件行为。

根据您的具体情况，您应该使用 activeTab选项来设置初始选项卡，并且只有在您实际需要更改选项卡时才调用 setActiveTab 。这将在初始化时节省一些不必要的处理，并且还将解决您的渲染问题...

您的代码应如下所示:

Ext.create('Ext.tab.Panel', {
    renderTo: Ext.getBody(),
    width: 400,
    height: 400,

    // Use this option to set the initial tab.        
    activeTab: 2,

    // You don't need to overnest your grids into another Panel, you can add
    // them directly as children of the tab panel.
    items: [
        // Ideally, you should give an xtype to your class, and add this to
        // avoid instantiating the object yourself... Thus giving Ext more
        // control on the rendering process, etc.
        Ext.create('myGrid', {
            id: 'blah',
            title: 'Bleh',
            columns: [{
                text: 'one',
                dataIndex: 'one'
            }, {
                text: 'two',
                dataIndex: 'two'
            }, {
                text: 'three',
                dataIndex: 'three'
            }],
            fields: ['one', 'two', 'three'],
            title: 'grid1'
        }),
        Ext.create('myGrid', {
            id: 'bleh',
            title: 'Bleh',
            columns: [{
                text: 'one',
                dataIndex: 'one'
            }, {
                text: 'two',
                dataIndex: 'two'
            }, {
                text: 'three',
                dataIndex: 'three'
            }],
            fields: ['one', 'two', 'three'],
            title: 'grid2'
        })
    ]
});

如您所见，选项卡面板子项是在创建时设置的，避免使用 add 方法进行无用的处理。同样，activeTab 选项避免在给定状态下初始化面板并立即更改它...稍后(在另一个执行框架中，例如在按钮处理程序中)，您可以使用 setActiveTab 而不会触发原始示例中演示的错误。