Question

I used the command sencha create jsb -a http://myserver/myapp/app.html -p apps.jsb3 -v

This created the file apps.jsb3, and when i opened this file, it contained all the definitions for Models and Stores (but, no controllers).

Then i followed with the command ;

sencha build -p apps.jsb3 -v -d . and this created 2 files. app.all.js which is a compressed form of the model, store and the app.js (and it also includes the definition of the controllers of the application as found in the app.js)

ex : ....controllers:["Person","Pers... likewise

and then all-classes.js has all the models, and stores (and again no controllers)

Then i included the following to my app.html file

<script type="text/javascript" src="extjs/ext.js"></script>
<script type="text/javascript" src="app-all.js"></script>

Finally, i copied the app-all.js, all-classes.js, app.html to another folder in the server. and this folder is called SERVERFOLDER2.

Now, when i type http://myserver/SERVERFOLDER2/app.html it says that "NetworkError: 404 Not Found - http://myserver/SERVERFOLDER2/app/controller/Person.js?_dc=1347636548640".

Why is this, and how can i resolve this ?

UPDATE APP.JS

Ext.Loader.setConfig({
    enabled: true     
});
Ext.require('Ext.container.Viewport' );  
Ext.application({        
    requires: [                     
        'MyApp.Names',          
        'Ext.window.MessageBox'   
    ],                         
       models: [      
        'PersonModel',      
        'SchoolModel'                 
    ],     
    stores: [ 
        'PersonStore',
        'SchoolStore'  ,
        'GenderStore
    ],     
    views: [            
        'UserPanel',      
        'SchoolViewPanel',               
        'UpdateSchoolWindow' 
    ],            
    controllers: [        
        'SchoolController',    
        'PersonController',      
        'UserActionController',
    ],     
     name: 'MyApp', 
    refs: 
        [{         
            ref: 'viewport',   
            selector: 'viewport'
        }],     
    launch: function() {
        Ext.create('Ext.container.Viewport', {  
        layout: 'card',  
            items: [  
            { 
                xtype: 'panel',        
                items: {
                xtype: 'UserPanel' 
                }
            }
            ]
        });  

    },

    userSuccess: function() {  
        var st = Ext.getStore('PersonStore');         
        st.on('load', this.onSuccess, this, {    
            single: true,  
            delay: 100            
        }); 
        st.load();      
    },            

    onSuccess: function() {      
        this.getViewport().getLayout().setActiveItem(1); 
    }

});

Answer 1

The process you describe looks good to me.

The problem you should focus on is why the generated jsb3 file does’t include the controller classes. All the steps that follow seem to work correctly, but the application does not fire up in the end because the packaging process does not include your controller class files.

Ext.Loader kicks in and tries to dynamically (‘on demand’) load the controller class file – the goal here is not to fix the path configuration for Ext.Loader to find the controller class, but rather to make sure the controller classes are included in the jsb3 file from step 1 in the first place.

I assume that your application starts up fine when launching it via http://myserver/myapp/app.html in the non-packaged state (with only ext-dev.js and no ext-all.js, app.all.js or whatsoever).

I further assume that you can observe messages on the console that say something along the lines of:

Synchronously loading ‘app.controller.Person’. Consider adding Ext.require() above Ext.onReady

This means that your class dependencies are not configured correctly. The controller class is not picked up as dependency and therefore not pre-loaded before your application starts.

The packaging process (your first step) relies on the dependencies to generate the jsb3 file. It will not pick up dependencies loaded synchronously on demand.

Solution
The goal is to remove any synchronous on-demand loading when you start your application. If you are successful, the packaging process should be fixed as well.

As a quick workaround you could simply Ext.require your controller classes above your Ext.onReady or Ext.application call.

However, controller classes should be automatically added as dependency by the framework. If they are not, then either your configuration is faulty or there it is a bug in ExtJs.