Mark-H/VersionX2 — Issue #10: Resource Details page does not work in Google Chrome
Author: adamlundrigan
Created: 2012-01-18 18:28:41+00:00
State: open

Javascript error:

Uncaught TypeError: Cannot call method 'addClass' of null

Stack trace from Chrome (using debug ExtJS w/ comments)

Ext.Panel.Ext.extend.onRender	ext-all.js:27231
Ext.FormPanel.Ext.extend.onRender	ext-all.js:67046
Ext.extend.render	ext-all.js:17182
Ext.layout.ContainerLayout.Ext.extend.renderItem	ext-all.js:21057
Ext.layout.FormLayout.Ext.extend.renderItem	ext-all.js:23313
Ext.layout.ContainerLayout.Ext.extend.renderAll	ext-all.js:21041
Ext.layout.ContainerLayout.Ext.extend.onLayout	ext-all.js:21027
Ext.layout.AnchorLayout.Ext.extend.onLayout	ext-all.js:21576
Ext.layout.ContainerLayout.Ext.extend.layout	ext-all.js:21021
Ext.Container.Ext.extend.doLayout	ext-all.js:20746
Ext.layout.AutoLayout.Ext.extend.onLayout	ext-all.js:21256
Ext.layout.ContainerLayout.Ext.extend.layout	ext-all.js:21021
Ext.layout.ContainerLayout.Ext.extend.runLayout	ext-all.js:21140
Ext.layout.ContainerLayout.Ext.extend.onResize	ext-all.js:21134
EXTUTIL.Event.fire	ext-all.js:518
EXTUTIL.Observable.fireEvent	ext-all.js:159
Ext.Panel.Ext.extend.onBodyResize	ext-all.js:27797
Ext.Panel.Ext.extend.onResize	ext-all.js:27788
Ext.BoxComponent.Ext.extend.setSize	ext-all.js:19242
Ext.BoxComponent.Ext.extend.afterRender	ext-all.js:19443
Ext.Container.Ext.extend.afterRender	ext-all.js:20410
Ext.Panel.Ext.extend.afterRender	ext-all.js:27517
Ext.extend.render	ext-all.js:17221
Ext.layout.ContainerLayout.Ext.extend.renderItem	ext-all.js:21057
Ext.layout.CardLayout.Ext.extend.renderAll	ext-all.js:21448
Ext.layout.ContainerLayout.Ext.extend.onLayout	ext-all.js:21027
Ext.layout.FitLayout.Ext.extend.onLayout	ext-all.js:21301
Ext.layout.ContainerLayout.Ext.extend.layout	ext-all.js:21021
Ext.layout.CardLayout.Ext.extend.setActiveItem	ext-all.js:21436
Ext.TabPanel.Ext.extend.setActiveTab	ext-all.js:48356
Ext.TabPanel.Ext.extend.afterRender	ext-all.js:47952
Ext.extend.render	ext-all.js:17221
Ext.layout.ContainerLayout.Ext.extend.renderItem	ext-all.js:21057
Ext.layout.ContainerLayout.Ext.extend.renderAll	ext-all.js:21041
Ext.layout.ContainerLayout.Ext.extend.onLayout	ext-all.js:21027
Ext.layout.AutoLayout.Ext.extend.onLayout	ext-all.js:21250
Ext.layout.ContainerLayout.Ext.extend.layout	ext-all.js:21021
Ext.Container.Ext.extend.doLayout	ext-all.js:20746
Ext.extend._loadComponents	modx.component.js:74
MODx.Component	modx.component.js:10
VersionX.page.Resource	action.resource.js:85
create	ext-all.js:16159
Ext.extend.load	modx.js:72
VersionX.page.Resource	action.resource.js:3
EXTUTIL.Event.name	ext-all.js:398
call	ext-all.js:2179

It appears to have something to do with the fact that ```versionx-panel-resourcesdetail``` extends ```MODx.FormPanel```. If I change that to ```MODx.Panel``` it renders properly (minus the resource data being populated, of course, as the call to ```VersionX.panel.ResourcesDetail.getForm()``` from ```action.resource.js``` fails)

Additional Notes:

* This was also reported on the MODx forums: http://forums.modx.com/thread/72078/versionx-v2---in-development-previews#dis-post-401838

* These two posts on sencha's forums are also similar:
http://www.sencha.com/forum/showthread.php?136050-ASK-Uncaught-TypeError-Cannot-call-method-addClass-of-null
http://www.sencha.com/forum/showthread.php?123142-Dynamically-add-FormPanel&p=568398
(nested form tags cause chrome to throw a fit)

* Another similar post on sencha's forums: http://www.sencha.com/forum/showthread.php?123144-Dynamically-adding-FormPanel-works-in-Safari-but-not-in-Chrome-or-Firefox
(components were not being initialized in the right order)