PDA

View Full Version : SenchaCmd 3.0.0.190 issues with Ext.Loader



abcoa
17 Oct 2012, 6:10 AM
I have a Sencha Architect 2.1 (SA21) project that I am trying to compile with SenchaCmd.
The structure of the project is as following:


/app
/lib
/extjs
/ux
/build
/index.html
/myapp-all-debug-w-comments.js
/myapp-all-debug.js
/myapp-all.js
/bootstrap.js
/app.js
/app.html
/index.html



Project loads fine with both app.html and index.html.
index.html uses ext-dev.js and has all the necessary directives for compiling (as app.html is reserved by SA21). See below for index.html


The problem is 2 fold.


Problem #1
---------------------------
1) When I generate bootrstrap.js and use it in index.html I get bunch of loading errors. If I comment out bootstrap.js, everything works ok. Here is the command I use to generate bootrstap.js


sencha compile -classpath=lib/extjs/src,lib/ux,app,app.js ^
meta -loader-paths -base-path . -out bootstrap.js and ^
meta -alternates -append -out bootstrap.js and ^
meta -alias -append -out bootstrap.js and ^
meta -manifest -out manifest.json and ^
meta -filenames -json -out filenames.json

Th errors I get are a bunch of Ext.Loader issues with following format:


Uncaught Error: [Ext.Loader] Failed loading 'app/controller/MyAppControllerOne.js/model/account/Index.js', please verify that the file exists
Uncaught Error: [Ext.Loader] Failed loading 'app/controller/MyAppControllerOne.js/view/account/Index.js', please verify that the file exists

Notice the path!? It does not make sense and I am not sure where it is getting this path.
The bootstrap.js file that is generated has correct paths (among many) for all files reported in the error console.
It looks proper to me:


Ext.Loader.addClassPathMappings({
...
"MyApp.controller.MyAppControllerOne": "app/controller/MyAppControllerOne.js",
...
"MyApp.model.account.Index": "app/model/account/Index.js",
...
"MyApp.view.account.Index": "app/view/account/Index.js",

Any idea what I am doing wrong here?


Problem #2
---------------------------
2) After compiling the app and using "all-in-one" generated JS file, I am still getting loader errors. I use following command to generate build files


sencha compile -classpath=lib/extjs/src,lib/ux,app,app.js -ignore=./bootstrap.js ^
concat build/myapp-all-debug-w-comments.js and ^
-options debug:true concat -strip-comments build/myap-all-debug.js and ^
-options debug:false concat -yui build/myap-all.js



The problem is again related to loader. The fact is, loader is supposed to be disabled here (documentation specifies that Ext.Loader is disabled by default)! But according to messages, it is not.
I breifly modified -debug file and added


Ext.Loader.setConfig({
enabled: false
});

but some files still fail to load.
What I don't understand is why these files are being even looked by by loader when all classes and now in single file.I included "production" index.html that I used












/index.html


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyApp</title>
<link rel="stylesheet" type="text/css" href="lib/extjs/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="resources/css/app.css" />
<!-- <x-compile> -->
<!-- <x-bootstrap> -->
<script type="text/javascript" src="lib/extjs/ext-dev.js"></script>
<script type="text/javascript" src="bootstrap.js"></script>
<!-- </x-bootstrap> -->
<script type="text/javascript" src="app.js"></script>
<!-- </x-compile> -->
</head>
<body>
<div id="loading-mask"></div>
<div id="loading">
<div class="loading-indicator">
Loading...
</div>
</div>
</body>
</html>





/build/index.html


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MyApp</title>
<link rel="stylesheet" type="text/css" href="../lib/extjs/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../resources/css/app.css" />
<script type="text/javascript" src="myapp-all-debug.js"></script>
</head>
<body>
<div id="loading-mask"></div>
<div id="loading">
<div class="loading-indicator">
Loading...
</div>
</div>
</body>
</html>

devnullable
17 Oct 2012, 6:41 AM
Hi!

I have been trying to get some attention from Sencha side but no success so far...

Anyway you can find temporary fix for the bug:

http://www.sencha.com/forum/showthread.php?244464-4.1.1-Controller-s-modules-load-problem&p=897523&viewfull=1#post897523

abcoa
17 Oct 2012, 7:13 AM
The issue you describe in your linked thread is exactly what I am experiencing as well, but your proposed fix (commenting out if statement block on line 392 of ./src/core/src/class/Loader.js) did not work for me...:( BTW, I am using ext js 4.1.2a

devnullable
17 Oct 2012, 7:26 AM
Hi!

In case of your problem #1 you should comment it out in lib/extjs/ext-dev.js because that is the file that default index.html is using.

abcoa
17 Oct 2012, 7:31 AM
I did that too, and am still getting errors.
[Ext.Loader] Failed loading 'Ext/app/Application.js'

devnullable
17 Oct 2012, 7:42 AM
I don't use Sencha Architect so I cannot help with that. Instead I have generate app with command sencha app generate which makes little bit different directory structure.

How about if you use command sencha app refresh? That should update the bootstrap.js file.

This Sencha Cmd 3 is more or less a moving target so it is not easy to keep yourself up to date :-/

abcoa
17 Oct 2012, 8:04 AM
Refreshing bootstrap.js didn't solve the issue either.
What I don't understand is why the Loader is throwing these errors even for production, "all in one" file. I even explicitly disabled the dynamic loading and am still getting weird errors...

Its frustrating ...:(

abcoa
23 Oct 2012, 7:44 AM
Can anyone from Sencha team comment on this please?

dongryphon
25 Oct 2012, 12:36 AM
I apologize for not replying sooner.

Let's start with the bootstrap problem. This looks familiar and maybe because of a code review for fixing it. We are going to refresh the Cmd build very soon but could you try 3.0.0.201 mentioned here:

http://www.sencha.com/forum/announcement.php?f=91&a=36

Just to see if that helps. If not I will do some further digging.

On problem 2, can you include the errors you are seeing? Or are they the same ones?

On the compile command you are using... it will produce all of the framework, ux library and your app. I suspect you are after the part of the framework and ux library that you are actually using. To do that, try something like this:



sencha compile -classpath=app.js,app,lib/extjs/src,lib/ux ^
union -recursive -file app.js and ^
concat build/myapp-all-debug-w-comments.js and ^
-options debug:true concat -strip-comments build/myap-all-debug.js and ^
-options debug:false concat -yui build/myap-all.js


You don't need to ignore the bootstrap.js file since it is not in your classpath. The union command clears the current set and unions in the specified things. In this case, just "app.js". Then the -recursive option kicks in and does the transitive dependency inclusion to pick up whatever is needed by something in the current set (just "app.js").

See http://docs.sencha.com/ext-js/4-1/#!/guide/command_compiler for more on union.

On "sencha app refresh" that will only work in an application generated by Sencha Cmd - but we are working to get this and Sencha Architect aligned.

abcoa
25 Oct 2012, 5:46 AM
Don

Thanks for replying.
I tried v3.0.0.201 and both problems still persist.
Since the linked thread (see above) mentioned that this could be issue related to Ext JS itself, I filed support ticket (9751) which resulted in Jira issue SDKTOOLS-217. Not sure if that helps but I thought I should mention it.

Problem 1
I rebuilt the meta before opening index.html. The generated bootrstap.js has Ext.Loader.addClassPathMappings that, visually at least, contain correct relative paths to all app files.
However as soon as I navigate to index.html, the Loader starts complaining that it cannot find views,models, and controllers.... As soon as I comment out bootstrap.js line everything goes back to normal.

Problem 2
There are no error messages during compile, but when I try to use build/index.html with all-classes.js (generated using compile page) or with myapp-all-debug.js (generated using snippet you posted), I get the same Ext.Loader errors as in Problem 1.
BTW, the command that I used in original post and the one you specified (with recursion) produce myapp-all-debug.js and myapp-all.js that exact same size! There appears to be no diiference

One more thing...Ext.Loader (according to docs) is supposed to be disabled by default. However, when I run "all.js" files it is still enabled. Since there is no way in Architect to set enabled:false, I tried manually editing produced -debug.js file for my app and setting enabled to false. The end result is still the same - the app fails to load due to missing files (which is weird because they are included in -all-*.js files)....The error looks something like this

Ext.Loader is not enabled, so dependencies cannot be resolved dynamically. Missing required classes: MyApp.model.account.Index, MyApp.store.account.Index, MyApp.store.lookup.LedgerPeriod

abcoa
1 Nov 2012, 4:40 AM
I just tested with SenchaCmd 3.0.0.230 and Ext JS 4.1.3 and the issues still persist.:(

dongryphon
1 Nov 2012, 12:27 PM
How much of your app can you post here so that we can look at what might be causing the issue? Obviously, boiling it down is a good thing but so far we have not reproduced these symptoms so I think it may be triggered by something in your code. Perhaps an auto-dependency that is not being recognized.

abcoa
1 Nov 2012, 12:35 PM
Don

I cannot really post my app here (for obvious reasons).
I could in the ticket system - would that work?

mysticav
5 Nov 2012, 6:28 PM
Question,

Why are you using Ext.Loader and bootstrap.js at the same time ?

Doesn't the bootstrap.js loads all the classes ?

As you can see, if you generate the app with Sencha Cmd, the Ext.Loader is disabled by default, because the bootstrap.js does the job.

devnullable
5 Nov 2012, 6:48 PM
Doesn't the bootstrap.js loads all the classes ?If you check the generated bootstrap.js you can see that it starts "Ext.Loader.addClassPathMappings" so the purpose of it is to tell Ext.Loader which files to load.

mysticav
5 Nov 2012, 10:28 PM
Which means that Ext.Loader should not auto load classes

bootstrap tells Ext Loader which classes to load in one shot, isnt it ?

abcoa
6 Nov 2012, 5:48 AM
Question,
... if you generate the app with Sencha Cmd, the Ext.Loader is disabled by default,.....

This has not been my experience. Although the docs say that "enabled" is false by default, I am finding that this is not the case and I have to explicitly turn it off...Furthermore, loader should be disabled for production all-classes.js but that is not the case either.

To my knowledge, during development you should be using loader, but once app is built (all-classes.js), it should not be used.

dongryphon
6 Nov 2012, 10:16 PM
Which means that Ext.Loader should not auto load classes

bootstrap tells Ext Loader which classes to load in one shot, isnt it ?

The "bootstrap" file contains information (also called "metadata") for the Loader that is used to convert class names like "MyApp.model.Foo" into URL's for dynamic loading. It also contains alias information which comes in to play when using Ext.widget or "xtype" config.

Loading is performed when explicitly requested (somewhat rare) or when there are "requires" or "uses" statements (typical).

abcoa
9 Nov 2012, 2:01 PM
I just tested this with SenchaCmd 3.0 GA (3.0.0.250) and with Ext JS 4.1.3.

- Problem #1 no longer occurs, so that is fixed.
- Problem #2 is still there though....

dongryphon
9 Nov 2012, 2:41 PM
Can you run with the "-debug" switch and include the full log here? (Please include the exact command you run as well).