NetworkError: 404 Not Found - when working through the MVC Architecture Guide [Archive]

murrah

24 Jul 2012, 4:45 AM

Hi All,

I am learning ExtJS4 MVC by stepping through the MVC Architecture Guide. USing Ext 4.1.1.

37431On my first go it all worked correctly until I got the the very last line and I got a NetworkError: 404 Not Found on my user.js file. I checked the forums and found just one post addressing this issue http://www.sencha.com/forum/showthread.php?145600-NetworkError-although-i-have-set-the-right-paths-for-Ext.Loader&p=859578#post859578 and I thought I had solved it (see the comments there). However, the error came back!

So, I started again with a new folder and created everything from scratch and was eventually successful in building the complete example after much trial and error. What I found along the way was:

1. The Guide says to use ext-debug.js. If I do that I get

"NetworkError: 404 Not Found - http://127.0.0.1:8501/sites/simpleMVC3/AM/view/user/List.js?_dc=1343130664275" List.j...0664275

"NetworkError: 404 Not Found - http://127.0.0.1:8501/sites/simpleMVC3/AM/view/user/Edit.js?_dc=1343130664277" Edit.j...0664277

"NetworkError: 404 Not Found - http://127.0.0.1:8501/sites/simpleMVC3/AM/store/Users.js?_dc=1343130664278" Users....0664278

"NetworkError: 404 Not Found - http://127.0.0.1:8501/sites/simpleMVC3/AM/model/User.js?_dc=1343130664272" User.j...0664272

If I use ext-all.js instead it works properly, as does ext-all-debug.js.

2. If I don't use the following exact sequence of <script> tags in my index.html

<html>
<head>
<title>Account Manager</title>

<link rel="stylesheet" type="text/css" href="ext-4/resources/css/ext-all.css">
<script type="text/javascript" src="ext-4/ext-all.js"></script>

<script type="text/javascript" src="app/model/User.js"></script>
<script type="text/javascript" src="app/view/user/List.js"></script>
<script type="text/javascript" src="app/view/user/Edit.js"></script>
<script type="text/javascript" src="app/store/Users.js"></script>
<script type="text/javascript" src="app/controller/Users.js"></script>
<script type="text/javascript" src="app.js"></script>

</head>
<body></body>
</html>
I get:
Ext.Loader is not enabled, so dependencies cannot be resolved dynamically. Missing required class: AM.model.User
[Break On This Error]

...else{l=b._lastItemForPoint;if(l){b.fireEvent("itemmouseout",l);delete b._lastIte...

ext-all.js (line 21)

Ext.Loader is not enabled, so dependencies cannot be resolved dynamically. Missing required class: AM.store.Users
[Break On This Error]

...else{l=b._lastItemForPoint;if(l){b.fireEvent("itemmouseout",l);delete b._lastIte...

ext-all.js (line 21)

Ext.Loader is not enabled, so dependencies cannot be resolved dynamically. Missing required class: AM.controller.Users
[Break On This Error]

...else{l=b._lastItemForPoint;if(l){b.fireEvent("itemmouseout",l);delete b._lastIte...
or varying versions of that depending upon what order I use.

So, given that I am using the Guide that is supposed to get me started, and given that I cant find anyone else having the same problem, what am I missing?
Is there missing info in the Guide about the necessity to place the script tags in a specific order?
If a specific order is necessary, what are the rules? Is it just that dependant files must be first?
Why doesn't ext-debug.js work as the Guide suggests it does?
Have I done something wrong?
I have zipped up my whole app and attached it. This is the working version. I would be interested to know if anyone else can replicate these problems. You will need to include the ext-all.js etc files yourself under /ext-4/ since I couldn't include them in the zip (too big).

I love ExtJS. And, I have just spent hours trying to get the first example working. Very frustrated.:(

Thanks,
Murray

Tim Toady

24 Jul 2012, 6:56 AM

If you were to include the scripts manually, yes the order does matter. There is no guide because you should not be doing it that way. It is meant to use dynamic loading (which you are having issues with in #1). Then in production you would use the SDK to combine and minify everything in one file.

As far as #1 goes, my guess would be you changed the appFolder property in app.js to 'AM' and the folder was still named app.

scottmartin

24 Jul 2012, 8:50 AM

You should not include all of your files in your html .. you should have your code include the required files

// html
../resources/css/ext-all.css
../ext.js 
app.js

//app.js
Ext.require([
// required files
});

// controller
stores : [ 'Users', .. ],
models : [ 'User', .. ],
views : [ 'users.List', .. ],

// views
requires: [
// required files
]

Scott.

friend

24 Jul 2012, 9:13 AM

During development, you may also need to enable the Ext.Loader, right after your ext.js include:

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

murrah

25 Jul 2012, 2:24 AM

Thanks so much for your responses. Old habits die hard, I guess! I had read the Getting Started and the MVC Architecture guides and didn't realise that all the talk about automatically loading classes implied that one didn't have to even specify the <script> tags in the html file! I assumed it simply meant instantiating the classes. That is so clever!

The sample app is working properly. My only change was to delete the superfluous <script> files from the html file. So, now on to add some extra classes to learn more!

Thanks again,
Murray