Ext JS: TabPanel слишком быстро отображает бесконечную сетку

Допустим, у меня есть TabPanel, к которому добавлены два компонента. Каждый компонент содержит бесконечную сетку. Каждая бесконечная сеть загружает свои данные из вызова службы, и каждый набор данных содержит 2000 записей. После того, как компоненты добавлены в TabPanel, мы устанавливаем каждый из них активной вкладкой, используя setActiveTab. Сначала мы устанавливаем вторую вкладку в качестве активной, а затем устанавливаем первую вкладку. Когда страница загружается, выбирается первая вкладка, как мы и ожидали.

При взгляде на первую вкладку все выглядит нормально... мы можем бесконечно прокручивать, сортировать, скрывать столбцы и т.д. Однако, если мы переключаемся на вторую вкладку, мы видим, что она частично загружена, и мы не можем прокручивать дальше x записи, которые были загружены, скрывают столбцы, сортируют и т. д. Это похоже на то, как если бы использование setActiveTab было немного преждевременным с рендерингом сетки... как если бы хранилище не было полностью загружено, но вкладка все равно была визуализирована. (это то, что я предполагаю, что проблема)

У меня есть код, но для его воспроизведения требуется небольшая работа с вашей стороны (потому что вам нужно обратиться в службу поддержки). Я использую CompoundJS в приложении Node.js, поэтому мне было очень легко создать тестовый пример. Если у вас есть доступ к базе данных и вы можете быстро позвонить в службу поддержки, просто измените мой код 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 удалите строку map.resources testcontroller и добавьте следующее:

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

В public/index.html сделайте его общим HTML-файлом и добавьте свои ссылки на Ext JS и мой приведенный выше код Ext JS.

Теперь, когда вы все это сделали, вы сможете воспроизвести мою проблему. Первая вкладка откроется и будет работать нормально, но вторая вкладка загружает только первое количество записей x и не работает должным образом. Я считаю, что это связано с тем, что хранилище не загружается полностью при запуске setActiveTab, что делает загрузку рендеринга беспристрастным хранилищем.

Я хочу знать, как мне заставить это работать правильно? Я пытался дождаться загрузки магазина, а затем добавить его на вкладку, но это все еще дает мне противоречивые результаты, а также пытался дождаться, пока сетка прекратит рендеринг, но все же я получаю противоречивые результаты... противоречиво это означает, что иногда сетка загружается полностью, и вкладка в порядке, но в других случаях я получаю невозможно прочитать свойство 'length' неопределенного в ext-all-dev.js:135,786.. ., из-за чего кажется, что хранилище не полностью загружено, так как эта строка содержит ссылку на records.length.

Если у кого-то есть идеи, буду рад их услышать! Кросс-пост с сайта форумы Sencha.

РЕДАКТИРОВАТЬ: благодаря @rixo я смог воспроизвести проблему в этом примере. Если вы включите Firebug, вы увидите ошибку о длине свойства undefined, как я сказал выше.