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被触发时，商店没有完全加载，这使得渲染加载成为一个公正的商店。

我想知道的是，如何让它正常工作？我已经尝试等待商店加载，然后将其添加到选项卡，但这仍然给我不一致的结果，以及尝试等待网格停止渲染，但仍然，我得到不一致的结果...不一致意思是，有时网格一直加载，选项卡很好，但有时候，我得到一个无法读取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触发原始示例中演示的错误。

Ext JS：TabPanel渲染无限网格太快了

1 个答案: