ExtJS Rally App Tabpanel 每个选项卡的新网格

Question

这让我抓狂..我想为我的每个面板添加一个网格，作为测试，我创建了两个商店，两个网格和一个选项卡面板..

我可以加载数据，第一个选项卡完美显示网格，第二个选项卡显示灰色但没有行。但是它确实显示了一个计数，该计数加起来位于分页旁边的底部..

只是试图让 PoC 工作，因此有无穷无尽的可重复功能..

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

所以我很确定这是 ExtJS 中的错误。选项卡面板上有一个 deferredRender 配置标志，默认情况下为真，并且只会在初始加载时呈现活动选项卡的内容。但是，当稍后切换选项卡时，它似乎无法正确地重新启用各种 store/grid 视图事件，因此整个第二个网格都被破坏了。

我只是通过关闭它来修复它。这是我的应用程序，已完成修复，并对您的 component/container 结构进行了一些清理和重复数据删除：

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 每个选项卡的新网格

ExtJS Rally App Tabpanel new grid per tab

grid

extjs

tabpanel

rally