Extjs 4 MVC - Relative path problems with App.JS finding my controller - under WEB-INF with Spring MVC

Question

Maybe the solution of my problem is contained in the question, but basically I\'m new to ExtJs 4 MVC and am having some difficulty where to place my JSPs.

I\'m usi

Answer 1

For the first attempt at getting this running it is easiest to use all static files just to keep things simple. Once the app is running from static html and js files, migration can then be made to use the spring mvc and jsp pages.

To start be sure there is a folder named resources under the webapp folder, assuming webapp is the parent of your existing WEB-INF folder.

The basic starting folder structure for using a static html page will be:

    webapp
    - resources
    -- app
    -- css
    --- ext-all.css
    -- sass
    -- themes
    - WEB-INF
    -- spring
    -- classes
    -- views
    index.html
    app.js
    ext-all-debug.js

In WEB-INF there is likely a spring folder with an mvc-config.xml file or similar. In that config file the resources folder needs to be designated for serving static content by using the resources tag. Likely, the first mvc:annotation-driven tag is alrleady in the config file as in this snipped below. Add the resources tag noted below into the config file.

With this in place the resources folder can serve the index.html file much like setup of the Sencha example.

All of this is setting you up to be able to build the first example from a url like: http://localhost:8080/resources/index.html

When downloaded and extracted, the Ext JS zip, contains a resources folder. Copy the subfolders of that folder into the webapp/resources folder. Also copy ext-all.debug.js to the webapp/resources folder.

Then create index.html in webapp/resources with this content similar to the Sencha tutorial:

Create app.js in the webapp/resources folder as the following snippet and enough is in place to be up and running with the single panel configured in app.js. From this point the tutorial is easy enough to port over to this setup.

    Ext.application({
            name: 'AM',
            appFolder: 'app',

                launch: function() {
                            Ext.create('Ext.container.Viewport', {
                                            layout: 'fit',
                                             items: [
                    {
                    xtype: 'panel',
                    title: 'Users',
                    html : 'List of users will go here'
                     }
                      ]
               });
       }
   });

After that static html file is running correctly, a jsp can be used from the view folder and will have content like this: