PDA

View Full Version : Unable to build a working app including Chart and Series



vspehner
12 Nov 2012, 8:37 AM
Ext version tested:

Sencha Touch 2.1 GPL Build date: 2012-10-12 11:45:27 (b94f51d9efb0f248957ae4a843a10cc426897b1d)
Sencha Cmd 3.0.0.250

Browser versions tested against:

Chrome 23 (Mac OS X)

Description:

Chart classes doesnt seam to be included during build

Steps to reproduce the problem:

Create an app with Pie or any Chart and try to compile it

The result that was expected:

Application working as on dev mode

The result that occurs instead:

Blue screen, app not loading and error message about an undefined function
I have created a demo app connected to Salesforce. To give you a general idea of the architecture give a look to http://vzmind.tumblr.com/post/34556303021/sencha-app-with-salesforce-api-using-a-sinatra-proxy. The final app objective is to display Leads list and charts of Opportunities (Pie, Bar, Line). Everything works fine locally and on Heroku as long as the application is not compiled ("built").

Then troubles occur: I want to compile app using Sencha Cmd.

The simple version of the app (homepage + a list) compiles properly, so far so good.
However, the graph version (homepage + a list + _graphs_) does NOT.
The build output is correct but the result app through 2 errors on Chrome

Errors were:

GET https://127.0.0.1:3000/build/mobile-dashboard/package/series/pie.js?_dc=1352734936092 404 (Not Found)
Uncaught TypeError: object is not a function

I observed that Ext.chart.series.Pie class definition was missing from the output app.js file. I kind of figured out how to fix the 404 by adding the file at the appropriate URL.

Then I got 3 different errors:



GET https://127.0.0.1:3000/build/mobile-dashboard/package/src/chart/series/Polar.js?_dc=1352736936442 404 (Not Found) app.js:1 (https://127.0.0.1:3000/build/mobile-dashboard/package/app.js)



GET https://127.0.0.1:3000/build/mobile-dashboard/package/src/chart/series/sprite/PieSlice.js?_dc=1352736936450 404 (Not Found) app.js:1 (https://127.0.0.1:3000/build/mobile-dashboard/package/app.js)



Uncaught TypeError: object is not a function


Again I solved them partiall by adding the whole src/chart folder at the appropriate URL.

At the end that error remains:

Uncaught TypeError: object is not a function



The full error stack is:



Uncaught TypeError: Cannot call method 'substring' of undefined app.js:2526
Ext.ClassManager.parseNamespace app.js:2526
Ext.ClassManager.get app.js:2602
Ext.ClassManager.instantiate app.js:2766
Ext.ClassManager.instantiateByAlias app.js:2758
Ext.apply.factory app.js:3941
Ext.define.applyInteractions app.js:34845
j app.js:2290
b.implement.initConfig app.js:1998
Ext.define.constructor app.js:9785
b.implement.callParent app.js:1935
Ext.define.constructor app.js:15146
b.implement.callSuper app.js:1939
Ext.define.constructor app.js:25549
b.implement.callSuper app.js:1939
Ext.define.constructor app.js:34631
f app.js:2157
(anonymous function)
Ext.ClassManager.instantiate app.js:2788
Ext.ClassManager.instantiateByAlias app.js:2758
Ext.apply.factory app.js:3949
Ext.define.factoryItem app.js:15307
Ext.define.add app.js:15337
Ext.define.applyItems app.js:15256
j app.js:2290
(anonymous function) app.js:2311
Ext.define.applyActiveItem app.js:15624
(anonymous function) app.js:7288
b.implement.initConfig app.js:1998
Ext.define.constructor app.js:9785
b.implement.callParent app.js:1935
Ext.define.constructor app.js:15146
f app.js:2157
(anonymous function)
Ext.ClassManager.instantiate app.js:2788
Ext.ClassManager.instantiateByAlias app.js:2758
Ext.apply.factory app.js:3949
Ext.define.factoryItem app.js:15307
Ext.define.add app.js:15337
Ext.define.applyItems app.js:15256
j app.js:2290
(anonymous function) app.js:2311
Ext.define.applyActiveItem app.js:15624
(anonymous function) app.js:7288
b.implement.initConfig app.js:1998
Ext.define.constructor app.js:9785
b.implement.callParent app.js:1935
Ext.define.constructor app.js:15146
f app.js:2157
(anonymous function)
Ext.ClassManager.instantiate app.js:2788
Ext.apply.factory app.js:3964
Ext.define.factoryItem app.js:15307
Ext.define.add app.js:15337
Ext.define.applyItems app.js:15256
j app.js:2290
(anonymous function) app.js:2311
Ext.define.applyActiveItem app.js:15624
(anonymous function) app.js:7288
b.implement.initConfig app.js:1998
Ext.define.constructor app.js:9785
b.implement.callParent app.js:1935
Ext.define.constructor app.js:15146
f app.js:2157
(anonymous function)
Ext.ClassManager.instantiate app.js:2788
Ext.ClassManager.instantiateByAlias app.js:2758
Ext.apply.factory app.js:3949
Ext.define.factoryItem app.js:15307
Ext.define.add app.js:15337
Ext.application.launch app.js:44390
Ext.define.onDependenciesLoaded app.js:19113
Ext.apply.require app.js:3315
(anonymous function) app.js:1401
Ext.define.loadControllerDependencies app.js:19098
Ext.apply.require app.js:3315
(anonymous function) app.js:1401
Ext.define.onProfilesLoaded app.js:19083
Ext.apply.require app.js:3315
(anonymous function) app.js:1401
(anonymous function) app.js:18986
Ext.apply.require app.js:3315
(anonymous function) app.js:1401
Ext.define.constructor app.js:18984
f app.js:2157
b.onReady app.js:3862
Ext.apply.onDocumentReady app.js:4063
o app.js:3400
Ext.apply.onReady app.js:3404
Ext.onReady app.js:3425
g app.js:3720
Ext.define.doAddListener app.js:42296
Ext.define.changeListener app.js:7098
Ext.define.addListener app.js:7143
(anonymous function) app.js:1896
(anonymous function) app.js:3746
Ext.apply.require app.js:3315
(anonymous function) app.js:1401
(anonymous function) app.js:3745
b app.js:3915
h app.js:3911
Ext.apply.factoryConfig app.js:3905
b app.js:3920
h app.js:3911
Ext.apply.factoryConfig app.js:3905
b app.js:3920
h app.js:3911
Ext.apply.factoryConfig app.js:3905
b app.js:3920
h app.js:3911
Ext.apply.factoryConfig app.js:3905
b app.js:3920
h app.js:3911
Ext.apply.factoryConfig app.js:3905
b app.js:3920
h app.js:3911
Ext.apply.factoryConfig app.js:3905
b app.js:3920
h app.js:3911
(anonymous function) app.js:3876
Ext.apply.factoryConfig app.js:3905
(anonymous function) app.js:3875
Ext.apply.require app.js:3315
(anonymous function) app.js:1401
Ext.apply.factoryConfig app.js:3874
b app.js:3920
h app.js:3911
(anonymous function) app.js:3876
Ext.apply.factoryConfig app.js:3905
(anonymous function) app.js:3875
Ext.apply.require app.js:3315
(anonymous function) app.js:1401
Ext.apply.factoryConfig app.js:3874
b app.js:3920
h app.js:3911
b app.js:3915
h app.js:3911
(anonymous function) app.js:3876
Ext.apply.factoryConfig app.js:3905
(anonymous function) app.js:3875
Ext.apply.require app.js:3315
(anonymous function) app.js:1401
Ext.apply.factoryConfig app.js:3874
b app.js:3920
h app.js:3911
(anonymous function) app.js:3876
Ext.apply.factoryConfig app.js:3905
(anonymous function) app.js:3875
Ext.apply.require app.js:3315
(anonymous function) app.js:1401
Ext.apply.factoryConfig app.js:3874
b app.js:3920
h app.js:3911
(anonymous function) app.js:3876
Ext.apply.factoryConfig app.js:3905
(anonymous function) app.js:3875
Ext.apply.require app.js:3315
(anonymous function) app.js:1401
Ext.apply.factoryConfig app.js:3874
b app.js:3920
h app.js:3911
(anonymous function) app.js:3876
Ext.apply.factoryConfig app.js:3905
(anonymous function) app.js:3875
Ext.apply.require app.js:3315
(anonymous function) app.js:1401
Ext.apply.factoryConfig app.js:3874
b app.js:3920
h app.js:3911
(anonymous function) app.js:3876
Ext.apply.factoryConfig app.js:3905
(anonymous function) app.js:3875
Ext.apply.require app.js:3315
(anonymous function) app.js:1401
Ext.apply.factoryConfig app.js:3874
b app.js:3920
h app.js:3911
(anonymous function) app.js:3876
b app.js:3915
h app.js:3911
b app.js:3915
h app.js:3911
(anonymous function) app.js:3876
Ext.apply.factoryConfig app.js:3905
(anonymous function) app.js:3875
Ext.apply.require app.js:3315
(anonymous function) app.js:1401
Ext.apply.factoryConfig app.js:3874
b app.js:3920
h app.js:3911
(anonymous function) app.js:3876
Ext.apply.factoryConfig app.js:3905
(anonymous function) app.js:3875
Ext.apply.require app.js:3315
(anonymous function) app.js:1401
Ext.apply.factoryConfig app.js:3874
b app.js:3920
h app.js:3911
(anonymous function) app.js:3876
Ext.apply.factoryConfig app.js:3905
(anonymous function) app.js:3875




It seams that Series Class is not loaded or something like that related to Chart Classes loading. I dont know how to debug such error.

I use Sencha Touch 2.1 GPL (which include theoretically Sencha Chart 2) + Sencha Cmd 3.0.0.250.
The build command is the standard one:


sencha app build package/testing/production
Attached is my app.js resulting file.

Any thought? Need more info to figure out what's wrong just tell me. I am working on Sencha since few weeks and that forum has always been resourceful for me. Will be happy to contribute back now :D

mitchellsimoens
12 Nov 2012, 2:53 PM
This error:


Uncaught TypeError: Cannot call method 'substring' of undefined

Usually means that an xtype is not present which would mean that you are not requiring something.

vspehner
12 Nov 2012, 3:47 PM
Hum I did a wrong copy and paste for the Stack. Sorry for that Mitchell.
The bug is "Object is not a function" and not "Cannot call method 'substring'"


Error evaluating https://127.0.0.1:3000/build/mobile-dashboard/production/app.js with message: TypeError: object is not a function

And the stack is



G index.html:46 (https://127.0.0.1:3000/build/mobile-dashboard/production/index.html)
c index.html:47 (https://127.0.0.1:3000/build/mobile-dashboard/production/index.html)
b index.html:47 (https://127.0.0.1:3000/build/mobile-dashboard/production/index.html)
(anonymous function) index.html:50 (https://127.0.0.1:3000/build/mobile-dashboard/production/index.html)
w index.html:50 (https://127.0.0.1:3000/build/mobile-dashboard/production/index.html)
(anonymous function) index.html:51 (https://127.0.0.1:3000/build/mobile-dashboard/production/index.html)


As said that application works properly whn running in dev/debug mode. I have added the resulting index.html. How to avoid compression of the js part of index.html?

vspehner
15 Nov 2012, 1:19 AM
So far I havent find any explanation why the build is not including Charts properly into the resulting app.js file. Has anybody already successfully built a chart app with Sencha Touch 2.1 and Sencha Cmd 3.0.0.250?

qsomazzi
2 Dec 2012, 1:37 PM
It seems i got the same issue
(http://www.sencha.com/forum/showthread.php?250497-Issue-with-charts-in-Production-Version&p=917271#post917271)

Do you find the answer ?

samlam.rac@gmail.com
5 Aug 2013, 2:27 AM
I am using ST 2.2.1.

I got same error after build production, but it is fine when development. Anyone help?

Uncaught TypeError: Cannot call method 'substring' of undefined
Ext.ClassManager.parseNamespace
Ext.ClassManager.get
Ext.ClassManager.instantiate
Ext.ClassManager.instantiateByAlias
Ext.apply.factory
Ext.define.applyAxes
m
(anonymous function)
Ext.define.applySeries
m
b.implement.initConfig
Ext.define.constructor
b.implement.callParent
Ext.define.constructor
b.implement.callSuper
Ext.define.constructor
b.implement.callSuper
Ext.define.constructor
g
(anonymous function)
Ext.ClassManager.instantiate
Ext.ClassManager.instantiateByAlias
Ext.apply.factory
Ext.define.factoryItem
Ext.define.add
Ext.define.applyItems
m
(anonymous function)
Ext.define.applyActiveItem
(anonymous function)
b.implement.initConfig
Ext.define.constructor
b.implement.callParent
Ext.define.constructor

mitchellsimoens
5 Aug 2013, 4:34 AM
Uncaught TypeError: Cannot call method 'substring' of undefined

That error means you are trying to create a component that it's class name or xtype is not defined usually because the file is not loaded.

samlam.rac@gmail.com
5 Aug 2013, 8:35 PM
That error means you are trying to create a component that it's class name or xtype is not defined usually because the file is not loaded.


Thanks so much! after deeper digging, the missing class is found!.

It seems Ext.chart is a special view control that will 'preload' the chart before the page (containing the chart) actually created. Requires 'Ext.chart.*' on very beginning like on the 'app.js' (may be it is a best practice to do that).

Hope it help you!