View Full Version : Firefox problem with autoloading.

30 Apr 2013, 12:21 AM

we have some strange problems with Firefox during development. We use a normal ExtJS 4.2 Application with sencha cmd. If we use the compiled version in firefox everything is okay. But if we use the development version, we have a strange probems. With development version, I mean the version where each class file is loaded automatically due to dependencies.

Most of the time we got this error:

TypeError: item.onAdded is not a function
item.onAdded(me, pos);

extjs/src/container/AbstractContainer.js (Line 666)

This error occures in very different situation. Some of them were fixed after we added additional requires. But now there is now missing dependency. Here is the class we try to add.

Ext.define('OurApp.foo.MainGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.ourapp_foo_maingrid',
columns: [{
xtype: 'templatecolumn',
tpl: '{firstname}',
flex: 1
hideHeaders: true,
header: false,
store: Ext.create('Ext.data.Store',{
fields:['firstname', 'lastname', 'seniority', 'dep', 'hired'],
{firstname:"Michael", lastname:"Scott", seniority:7, dep:"Management", hired:"01/10/2004"},
{firstname:"Dwight", lastname:"Schrute", seniority:2, dep:"Sales", hired:"04/01/2004"},
{firstname:"Jim", lastname:"Halpert", seniority:3, dep:"Sales", hired:"02/22/2006"},
{firstname:"Kevin", lastname:"Malone", seniority:4, dep:"Accounting", hired:"06/10/2007"},
{firstname:"Angela", lastname:"Martin", seniority:5, dep:"Accounting", hired:"10/21/2008"}

We add this to another container like this:

requires: [
items: [
id: 'foogrid',
region: 'center',
xtype: 'ourapp_foo_maingrid'

The reasons seems to be a dependency problem somehow. If we replace ext-dev.js in index.html with ext-all-dev.js everything works fine. But we did not figure out what the real problem is.

Additionally sometimes other errors occur like

TypeError: ddm is undefined
ddm.fireEvents = Ext.Function.createSequence(ddm.fireEvents, this.onFire, this)

extjs/src/dd/ScrollManager.js (Line 45)

The traces of such errors (the first one) did not point out the problem:

TypeError: item.onAdded is not a function
()Abstra...8510193 (Line 666)
()Abstra...8510193 (Line 342)
()Abstra...8510193 (Line 320)
()ext-dev.js (Zeile 6909)
()Contai...8509093 (Line 168)
()Abstra...8510042 (Line 1203)
()ext-dev.js (Line 6909)
()Compon...8509472 (Line 365)
constructor()ext-dev.js (Line 8116)
()Table....8509094 (Line 388)
()Abstra...8510042 (Line 1203)
()ext-dev.js (Zeile 6909)
()Compon...8509472 (Line 365)
constructor()ext-dev.js (Line 8116)
()ext-dev.js (Line 9275)
()Compon...8509213 (Line 56)
()Abstra...8510193 (Line 563)
()Abstra...8510193 (Line 533)
()Abstra...8510193 (Line 634)
()Abstra...8510193 (Line 342)
()ext-dev.js (Line 6909)
()Abstra...8510063 (Line 207)

We investigated the problematic line "item.onAdded(me, pos);" and it seems, that item is something like this:

$className "Ext.grid.column.Template"
alias ["widget.templatecolumn"]
alternateClassName "Ext.grid.TemplateColumn"
config Object {}
configMap Object {}
initConfigList []
initConfigMap Object {}
isInstance true
requires [constructor()]
superclass Object { isInstance=true, $className="Ext.Base", initConfigList=[0], mehr...}
xtype "templatecolumn"
xtypes ["templatecolumn"]
xtypesChain ["templatecolumn"]
xtypesMap Object { templatecolumn=true}
self constructor()
callOverridden Ext.Base#callParent()
callParent Ext.Base#callParent()
callSuper Ext.Base#callSuper()
configClass function()
defaultRenderer Ext.grid.column.Template#defaultRenderer()
destroy Ext.Base#destroy()
getConfig Ext.Base#getConfig()
getInitialConfig Ext.Base#getInitialConfig()
hasConfig Ext.Base#hasConfig()
initComponent Ext.grid.column.Template#initComponent()
initConfig Ext.Base#initConfig()
onClassCreated Ext.grid.column.Template#onClassCreated()
onConfigUpdate Ext.Base#onConfigUpdate()
setConfig Ext.Base#setConfig()
statics Ext.Base#statics()
__proto__ Object { superclass={...}, config={...}, initConfigList=[0], mehr...}

Especially there is no onAdded method.

With other browsers like Chrome everything works fine. What may be the reason for such errors. How should we debug such errors?

Thx farion

30 Apr 2013, 1:53 AM
The problem occurs also if I do this in Firebug.


So no other panels or things are affected.

15 May 2013, 5:21 AM
it will work if you comment out the constructor. Sometimes, it works when you add

this.callParent(arguments);in the constructor.

Sometimes, adding "requries" can make it works too.

25 Mar 2014, 2:41 PM
I can just confirm the same problem. Unfortunately I do not understand the reason.


27 Mar 2014, 2:59 PM
In case of Ext.grid.panel with cellEditing plugin it helps to move the definition of plugin into initComponent() function instead of trying use config object like this

Ext.create('Ext.plugin.CellEditing', {
listeners: {
'afteredit': function() {......}

As I said I unfortunately dont know why it helps.