This only started happening after I upgraded to 5.1. I have the following code that just won't work no matter what I do. I've even added listeners to "afterrender" or "added" on the new tab to set the active tab. Nothing works. Basically, whenever tabpanel.setActiveTab() is called I get the same error:

It bombs on "if (c.isFocusable())"


Here is the stack trace:



Code:



Uncaught TypeError: undefined is not a function
ext-all-rtl-debug.js?_dc=1423236494080:15444Ext.apply.pseudos.focusable
ext-all-rtl-debug.js?_dc=1423236494080:15166filterByPseudo
ext-all-rtl-debug.js?_dc=1423236494080:15047filterItems
ext-all-rtl-debug.js?_dc=1423236494080:15313cq.Query.Ext.extend._execute
ext-all-rtl-debug.js?_dc=1423236494080:15274cq.Query.Ext.extend.execute
ext-all-rtl-debug.js?_dc=1423236494080:15483Ext.apply.query
ext-all-rtl-debug.js?_dc=1423236494080:63798Ext.define.query
ext-all-rtl-debug.js?_dc=1423236494080:63841Ext.define.down
ext-all-rtl-debug.js?_dc=1423236494080:76257Ext.define.getDefaultFocus
ext-all-rtl-debug.js?_dc=1423236494080:76706Ext.define.privates.getFocusEl
ext-all-rtl-debug.js?_dc=1423236494080:38270Ext.define.focus
ext-all-rtl-debug.js?_dc=1423236494080:107905Ext.define.setActiveItem
ext-all-rtl-debug.js?_dc=1423236494080:110271Ext.define.setActiveTab
TestsController.js?_dc=1423236495499:219Ext.define.createReport
TestsController.js?_dc=1423236495499:41control.testloadlist #btnViewReport.click
ext-all-rtl-debug.js?_dc=1423236494080:11803fire
ext-all-rtl-debug.js?_dc=1423236494080:33357Ext.define.dispatch
ext-all-rtl-debug.js?_dc=1423236494080:7381Ext.Base.Base.addMembers.callParent
ext-all-rtl-debug.js?_dc=1423236494080:33539Ext.define.dispatch
ext-all-rtl-debug.js?_dc=1423236494080:33465prototype.doFireEvent
ext-all-rtl-debug.js?_dc=1423236494080:12300fireEventArgs
ext-all-rtl-debug.js?_dc=1423236494080:12274fireEvent
ext-all-rtl-debug.js?_dc=1423236494080:108903Ext.define.fireHandler
ext-all-rtl-debug.js?_dc=1423236494080:108892Ext.define.onClick
ext-all-rtl-debug.js?_dc=1423236494080:11803fire
ext-all-rtl-debug.js?_dc=1423236494080:18548Ext.define.fire
ext-all-rtl-debug.js?_dc=1423236494080:18524Ext.define.publish
ext-all-rtl-debug.js?_dc=1423236494080:18574Ext.define.doDelegatedEvent
ext-all-rtl-debug.js?_dc=1423236494080:18561Ext.define.onDelegatedEvent
ext-all-rtl-debug.js?_dc=1423236494080:4405Ext.Function.ExtFunction.bind.method

Here's extjs code it bombs on.

Code:



focusable: function(cmps) {
var len = cmps.length,
results = [],
i = 0,
c;
for (; i < len; i++) {
c = cmps[i];


if (c.isFocusable()) {
results.push(c);
}
}
return results;
},



I upgraded to 5.1 for one feature which is the ability to add a click event to a point in a line chart.

I now have that working, but now I can't change tabs. When I evaluate "c" above, its often one of the chart lines from a chart i'm trying to load in the new tab.

Basically I have two methods in my Controller that call each other. I call createReport when someone clicks a button which then adds a new tab to the tabpanel. The xtype report-test contains grids and charts.


As soon as "mainTabs.setActiveTab(instance);" is called from the addNewTab method I get the focus error above. At first I thought it was a race condition but wrapping the setActiveTab in a setTimeout for 5 seconds doesn't help. It also is never the same chart object that "c" bombs on.


I can instantly click on the new tab manually and it works fine every time.



Code:



createReport: function (title, icon, closable) {
this.addNewTab({ xtype:"report-test", closable: !!closable, iconCls: icon, title: title}, true);
},
addNewTab: function(obj, setActive){
var mainTabs = Ext.ComponentQuery.query('#tabPanelMain')[0];
var instance = mainTabs.add(obj); // add to new tab
if(setActive) {
mainTabs.setActiveTab(instance);
}
},

Any help you guys can provide would be greatly appreciated.

Thanks!