ExtJS Rally App Tabpanel new grid per tab

Question

This is driving me nuts.. I want to add a grid to each of my panels, as a test i have created two stores, two grids and a tabpanel..

I can get the data to load and the first tab displays the grid perfectly, the second shows the gris but no rows. However it does show a count which adds up to the store at the bottom next to the pagination..

Just trying to get a PoC to work hence the endless repeatable functions..

Ext.define('CustomApp', {
  extend: 'Rally.app.App',
  componentCls: 'app',
  launch: function() {
    this.myGrid_Issue = null;
    this.myGrid_Risk = null;
    this._store_Risk();
  },

  _store_Risk: function(id) {
    var myFilter_risk = Ext.create('Rally.data.wsapi.Filter', {
      property: 'c_RAIDType',
      operation: '=',
      value: 'Risk'
    });
    console.log('Filter Risk ', myFilter_risk);
    var store_Risk = Ext.create('Rally.data.wsapi.Store', { // create 
      model: 'PortfolioItem',
      limit: Infinity,
      autoLoad: true,
      filters: myFilter_risk,
      fetch: ['FormattedID', 'Name', 'c_RAIDType'],
    });
    console.log('Store Risk ', store_Risk);
    var myGrid_Risk = Ext.create('Ext.container.Container', {
      items: [{
        xtype: 'rallygrid',
        model: 'PortfolioItem',
        store: store_Risk,
        height: '100%',
        columnCfgs: ['FormattedID', 'Name'],
      }],
    });
    console.log('Grid Risk ', myGrid_Risk);
    var myFilter_Issue = Ext.create('Rally.data.wsapi.Filter', {
      property: 'c_RAIDType',
      operation: '=',
      value: 'Issue'
    });
    console.log('Filter Issue ', myFilter_Issue);
    var store_Issue = Ext.create('Rally.data.wsapi.Store', { // create 
      model: 'PortfolioItem',
      limit: Infinity,
      autoLoad: true,
      filters: myFilter_Issue,
      fetch: ['FormattedID', 'Name', 'c_RAIDType'],
    });
    console.log('Store Issue ', store_Issue);
    var myGrid_Issue = Ext.create('Ext.container.Container', {
      items: [{
        xtype: 'rallygrid',
        model: 'PortfolioItem',
        store: store_Issue,
        height: '100%',
        columnCfgs: ['FormattedID', 'Name'],
      }],
    });
    console.log('Grid Issue ', myGrid_Issue);
    var output = Ext.create('Ext.TabPanel', {
      items: [{
        title: 'Risks',
        items: [
          myGrid_Risk
        ]
      }, {
        title: 'Issues',
        items: [
          myGrid_Issue
        ]
      }]
    });
    this.add(output);
  },
});

Answer 1

So I'm pretty sure this is a bug in ExtJS. There is a deferredRender config flag on the tab panel that is true by default and will only render the contents of the active tab on initial load. However when then later switching tabs it doesn't seem to correctly re-enable the various store/grid view events and so the whole second grid is broken.

I fixed it by just turning that off. Here's my app with that fix made and with a little cleanup and de-dupe of your component/container structure:

Ext.define('CustomApp', {
    extend: 'Rally.app.App',
    componentCls: 'app',
    layout: 'fit',

    launch: function () {
        this.add({
            xtype: 'tabpanel',
            deferredRender: false, //BUG FIX HERE!
            items: [
                {
                    title: 'Risks',
                    xtype: 'rallygrid',
                    storeConfig: {
                        model: 'PortfolioItem',
                        filters: [{
                            property: 'c_RAIDType',
                            operation: '=',
                            value: 'Risk'
                        }],
                        fetch: ['FormattedID', 'Name', 'c_RAIDType'],
                    },
                    columnCfgs: ['FormattedID', 'Name'],
                },
                {
                    title: 'Issues',
                    xtype: 'rallygrid',
                    storeConfig: {
                        model: 'PortfolioItem',
                        filters: [{
                            property: 'c_RAIDType',
                            operation: '=',
                            value: 'Issue'
                        }],
                        fetch: ['FormattedID', 'Name', 'c_RAIDType'],
                    },
                    columnCfgs: ['FormattedID', 'Name'],
                }
            ]
        });
    }
});