Ext JS: TabPanel rendering Infinite Grid too quickly

Question

Let's say I have a TabPanel that gets two components added to it. Each component contains an Infinite Grid. Each Infinite Grid loads its data from a service call, and each set of data contains 2,000 records. After the components are added to the TabPanel, we set each one to be the active tab, using setActiveTab. We first set the 2nd tab as the active tab and then set the first tab. When the page loads, the first tab is selected, as we expected.

When looking at the first tab, everything looks fine... we can infinitely scroll, sort, hide columns, etc. However, if we switch to the second tab, we see that it has partially loaded, and we can't scroll past the x records that have loaded, hide columns, sort, etc. It's almost as if using setActiveTab was a bit premature with rendering the grid... as if the store wasn't completely loaded, but the tab was rendered anyway. (this is what I'm assuming the issue is)

I do have code, but it takes a little work on your end to reproduce (because you need a service call). I'm using CompoundJS within a Node.js application, so it was very easy for me to create the test case. If you have access to a database, and can make a quick service call, just modify my Ext JS code, but if you want to use Node.js, you can try this:

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 code

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

Replace app/controllers/testcontrollers_controller.js with:

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
  });
});

In config/routes.js, remove testcontroller's map.resources line, and add this:

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

In public/index.html, make it a generic HTML file, and add in your links to Ext JS and my above Ext JS code.

Now, once you've done all of that, you should be able to reproduce my issue. The first tab will open and be just fine, but the second tab only loads the first x amount of records and doesn't function properly. I believe this is due to the store not loading completely when setActiveTab is fired, which makes the rendering load an impartial store.

What I want to know is, how do I get this to work properly? I've tried waiting for the store to load, and then adding it to the tab, but that still gives me inconsistent results, as well as tried waiting for the grid to stop rendering, but still, I get inconsistent results... inconsistent meaning, sometimes the grid loads all the way, and the tab is fine, but other times, I get a cannot read property 'length' of undefined in ext-all-dev.js:135,786... which makes it seem like the store hasn't completely loaded, as that line contains a reference to records.length.

If anyone has any ideas, I'd love to hear them! Cross-posted from the Sencha forums.

EDIT: Thanks to @rixo, I was able to reproduce the problem in this example. If you enable Firebug, you'll see the error about property length of undefined, as I stated above.

Answer 1

I tracked the issue down to the plugin caching incorrect size values when it is hidden.

Here's an override that would fix this behavior:

/**
 * 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);
        }
    }
});

That being said, I advice against using this and unnecessarily bloating your code base.

You should rather organise your code in a way that avoid this situation. The problem is created by the fact that you're calling setActiveTab multiple time in the same execution frame. If you avoid that, Ext will handle the situation correctly all by itself.

As a general principle, you should try to make your Ext code more declarative... Ext architecture rather expects you to build big configuration objects to create your component at once (allowing for atomic DOM updates, etc.), and use methods that will update the state only later, to drive the components behaviour.

In your precise case, you should use the activeTab option to set the initial tab, and only call setActiveTab later, when you actually need to change the tab. That will save some unnecessary processing at initialization, and will also resolve your rendering issue...

Here's how your code should look like:

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'
        })
    ]
});

As you can see, the tab panel child items are set at creation time, avoiding useless processing with the add method. Likewise, the activeTab option avoid to initialize the panel in a given state and change it right away... Later (in another execution frame, for example in a button handler), you can use setActiveTab without triggering the bug demonstrated in your original example.