Extjs - Create and work with multipage applications

Extjs is single page application, but as users of extjs are growing across, applications are also growing. With large applcations users want mult page applications.

With extjs in single page application you can't have multiple html/jsp files. If you want to have multiple page you need to create multiple folders, seperate folder for each page. This approach solves the problem but it will create duplicate files in your project.

To solve this issue, Sencha come up with Workspaces in sencha cmd.

To setup sencha workspace you need to install Sencha cmd.

Once sencha cmd is installed on your machine, fire following command

 sencha generate workspace /path/to/workspace                                        

Sencha workspace folder structure

this will initiate workpace in given folder.

So till now you are done with setting up sencha workspace, next step is to create pages in workspace. Use following sencha command to generate pages:

sencha -sdk /path/to/ext generate app GridDemo /path/to/workspace/GridDemo   

This command will create files in folder as

Sencha workspace application folder structure

Next step is to minify your code to put in live environment, navigate to page folder under workspace and fire following command

sencha app build    

Sencha will minify JavaScripts and stylesheets and collate those in one minified file. Output of build is placed in workspace/build/production/

There will the code which is common to all pages, there are two options:

1. Packages: Sencha provide packages feature so that you download/write javascript, sass and resources packages and integrate those with your application. In case of single page application its seasy you have to copy those in packages folder, but with multipage those packages should be   shared with all applications which are there in you extjs workspace.
   
   
   To share packages between workspace applications packages are downloaded once and stored in ./packages folder in workspace. This package folder location is configurable and set in .sencha/workspace/sencha.cfg files in workspace.package.dir property.
   
   
2. workspace.classpath: Lets say there are common javascript files which will be shared in all applications in workspace, So we can put those in common folder in workspace and tell sencha cmd to include those files while doing sencha build on applications. You have to tell sencha cmd which one is the common folder and from next sencha app build it starts to include files from that folder in build. Path is configured in .sencha/workspace/sencha.cfg file, in workspace.classpath property.
   
   
   E.g. workspace.classpath=${workspace.dir}/common/src