Extjs 5.1.0 upgrade, Card layout issue within a border layout viewport

Question

We upgraded our application to Extjs Version 5.1.0 and building it with Sencha Cmd 5.1.0.26 and we are facing layout issues when switching from from card view to another.

We are using 'border' layout in viewport and 'card' layout in the center region.

Here is my viewport

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} 

] 
}); 

When user switch from homeCard1 to menuCard2, it throw some reference error and whole layout messed up and nothing works.

Actually it only happens when then the second view (card) has sencha-chart

Here is the my chart class, this functionality is working fine. but when i switch from one page/view to another then the error appears.

I am using setActiveItem() to show the other view

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

Chart JS file

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

Here is the error i am getting

**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

Thanks in Advance for your help!!

Answer 1

This looks similar to your issue and appears to be still an open issue. Here is the override they suggested to get around it until they have an actual fix.

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

    });
});