Extjs 5.1.0 升级，边框布局视口内的卡片布局问题

Question

我们将应用程序升级到 Extjs 版本 5.1.0 并使用 Sencha Cmd 5.1.0.26 构建它，当从卡片视图切换到另一个时，我们遇到了布局问题。

我们在视口中使用“边框”布局，在中心区域使用“卡片”布局。

这是我的视口

Ext.define('MyApp.view.Viewport', { 
extend : 'Ext.container.Viewport', 
id : 'myviewpoint', 
flex: 1, 

layout : 
{ 
type : 'border' 
}, 

initComponent : function() { 

this.items = [ 
{ 
xtype : 'appheader', 
region : 'north' 
}, 
{ 
xtype : 'appcenter', 
region : 'center' 
}, 
{ 
xtype : 'appfooter', 
region : 'south' 
}]; 
this.callParent(arguments); 
} 
}); 

and here is my center 

Ext.define('MyApp.view.layout.Center', { 
extend: 'Ext.panel.Panel', 
alias : 'widget.appcenter', 
id: 'appcenter', 

requires: [..... ], 

items: [ 
{ xtype: 'homeCard1' }, 
{ xtype: 'menuCard2', hidden: true}, 
{ xtype: 'menuCard2', hidden: true} 

] 
}); 

当用户从 homeCard1 切换到 menuCard2 时，它会抛出一些参考错误，整个布局混乱，没有任何效果。

实际上只有当第二个视图（卡片）有sencha-chart时才会发生

这是我的图表类，此功能运行良好。但是当我从一个页面/视图切换到另一个页面时，就会出现错误。

我正在使用 setActiveItem() 来显示另一个视图

this.getCenterRegion().getLayout().setActiveItem('menuCard2');

图表JS文件

Ext.define('MyApp.view.MyAumPieChart', {
  extend : 'Ext.panel.Panel',
  alias : 'widget.guidelineReconStatusAumPieChart',
  id : 'myAumPieChart',

  requires : ['Ext.chart.PolarChart',
              'Ext.chart.series.Pie',
              'Ext.chart.series.sprite.PieSlice',
              'Ext.chart.interactions.Rotate',
              'Ext.chart.interactions.ItemHighlight'],
  padding: '0, 0, 0, 10',
  width: 600,

  dockedItems: [{
    xtype: 'toolbar',
    id:    'aumPieToolbar',
    dock: 'top',
    items: [
      { xtype : 'tbtext', id : 'aumPieTitle', text: '<b>My Pie Chart</b>', padding : '3 0 3 0' },
      { xtype : 'tbfill' },
      { xtype : 'button', id : 'aumPieSave', text: '<b><u>Save Chart</u></b>', border: 1 }
    ]
  }],

  initComponent : function() {
    this.items = [
      {
        xtype: 'polar',
        id: 'aumPieChart_id',
        height: 400,
        width: '100%',
        interactions: ['rotate', 'itemhighlight'],
        store: Ext.data.StoreManager.lookup('report.AumPieChart'),          
        insetPadding: 50,
        innerPadding: 20,
        series: {
          type: 'pie',
          xField: 'data',
          donut: 50,
          highlight: true,
          label: {
           field: 'name'

          }
          tooltip: {
              trackMouse: true,
              style: 'background: #fff',
              renderer: function(storeItem, item) {
                console.log(storeItem);
                this.setHtml(storeItem.get('name'));
              }
          }
        }
      } 
    ];   

    this.callParent(arguments);
  }
});

这是我得到的错误

**Uncaught TypeError: Object [object Object] has no method 'isFocusable' ext-all-debug.js:15441**


Ext.apply.pseudos.focusable ext-all-debug.js:15441
filterByPseudo ext-all-debug.js:15163
filterItems ext-all-debug.js:15044
cq.Query.Ext.extend._execute ext-all-debug.js:15310
cq.Query.Ext.extend.execute ext-all-debug.js:15271
Ext.apply.query ext-all-debug.js:15480
Ext.define.query ext-all-debug.js:63058
Ext.define.down ext-all-debug.js:63101
Ext.define.getDefaultFocus ext-all-debug.js:75517
Ext.define.privates.getFocusEl ext-all-debug.js:75966
Ext.define.focus ext-all-debug.js:37682
Ext.define.setActiveItem ext-all-debug.js:106716
Ext.define.doSearchAndDisplay Header.js?_dc=1422407408850:265

提前感谢您的帮助！！

Answer 1

This 看起来与您的问题相似，并且似乎仍然是一个悬而未决的问题。这是他们建议在实际修复之前绕过它的覆盖。

Ext.define('Override.ComponentQuery', {
    override: 'Ext.ComponentQuery'
},function () {
    Ext.apply(this.pseudos, {
        focusable: function(cmps) {
            var len = cmps.length,
                results = [],
                i = 0,
                c;

            for (; i < len; i++) {
                c = cmps[i];
                // If this is a generally focusable Component (has a focusEl, is rendered, enabled and visible)
                // then it is currently focusable if focus management is enabled or if it is an input field, a button or a menu item
                if (c.isFocusable && c.isFocusable()) {
                // if (c.isFocusable()) {
                    results.push(c);
                }
            }

            return results;
        },

    });
});