1. #1
    Sencha User murrah's Avatar
    Join Date
    Oct 2007
    Location
    Katoomba, Blue Mountains, west of Sydney, Australia
    Posts
    388
    Vote Rating
    12
    Answers
    3
    murrah will become famous soon enough

      0  

    Default Answered: NetworkError: 404 Not Found - when working through the MVC Architecture Guide

    Answered: NetworkError: 404 Not Found - when working through the MVC Architecture Guide


    Hi All,

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

    simpleMVC3.zipOn 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/showthre...578#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
    PHP Code:
    "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 Code:
    <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:
    PHP Code:
    Ext.Loader is not enabledso dependencies cannot be resolved dynamicallyMissing 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 enabledso dependencies cannot be resolved dynamicallyMissing 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 enabledso dependencies cannot be resolved dynamicallyMissing 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

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

    Code:
    // html
    ../resources/css/ext-all.css
    ../ext.js  <!-- ext-dev.js for dev -->
    app.js
    
    //app.js
    Ext.require([
     // required files
    });
    
    // controller
    stores : [ 'Users', .. ],
    models : [ 'User', .. ],
    views : [ 'users.List', .. ],
    
    // views
    requires: [
    // required files
    ]
    Scott.

  3. #2
    Sencha User Tim Toady's Avatar
    Join Date
    Feb 2010
    Location
    Pennsylvania
    Posts
    570
    Vote Rating
    181
    Answers
    62
    Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold Tim Toady is a splendid one to behold

      0  

    Default


    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.

  4. #3
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,197
    Vote Rating
    482
    Answers
    690
    scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future scottmartin has a brilliant future

      0  

    Default


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

    Code:
    // html
    ../resources/css/ext-all.css
    ../ext.js  <!-- ext-dev.js for dev -->
    app.js
    
    //app.js
    Ext.require([
     // required files
    });
    
    // controller
    stores : [ 'Users', .. ],
    models : [ 'User', .. ],
    views : [ 'users.List', .. ],
    
    // views
    requires: [
    // required files
    ]
    Scott.

  5. #4
    Sencha - Community Support Team friend's Avatar
    Join Date
    Apr 2011
    Posts
    895
    Vote Rating
    27
    Answers
    106
    friend has a spectacular aura about friend has a spectacular aura about

      0  

    Default


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

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

  6. #5
    Sencha User murrah's Avatar
    Join Date
    Oct 2007
    Location
    Katoomba, Blue Mountains, west of Sydney, Australia
    Posts
    388
    Vote Rating
    12
    Answers
    3
    murrah will become famous soon enough

      0  

    Default


    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