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

Ok so i've tried this several ways and still get the same error.. Such as single functions taking the type as a param, both grids work but do the same thing.... Every now and then it works but as soon as I refresh the browser it fails which is really odd.. — Cookra
This is a stumper. There's nothing wrong with your code at all. It feels like a defect in the gridview somewhere. The reason it doesn't render anything is because the second grid doesn't think it has any columns, but I haven't dug in far enough to know why yet... — Kyle Morse

Kyle Morse Kyle Morse · Accepted Answer · 2017-06-27T18:01:36

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

ExtJS Rally App Tabpanel new grid per tab

1 Answers