Until now we have only worked with the Sencha Cmd-generated index.html
file. We will now create a new index-dev.html
file for our development environment. The development file will be a copy of the index.html
file without the bootstrap.css
file. We will reference the default classic
theme in the index-dev.html
file as follows:
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>TTT</title> <link rel="stylesheet" href="ext/packages/ext-theme-classic/build/resources/ext-theme-classic-all.css"> <link rel="stylesheet" href="resources/styles.css"> <!-- <x-compile> --> <!-- <x-bootstrap> --> <script src="ext/ext-dev.js"></script> <script src="bootstrap.js"></script> <!-- </x-bootstrap> --> <script src="app.js"></script> <!-- </x-compile> --> </head> <body></body> </html>
Note that we have moved the stylesheet
definition out of the <!-- <x-compile> -->
directive.
If you are using the downloaded source code for the book, you will have the resources/styles.css
file and the resources
directory structure available. The stylesheet and associated images in the resources
directory contain the 3T logos and icons. We recommend you download the full source code now for completeness.
We can now modify the Sencha Cmd compile
command to use the index-dev.html
file and output the generated compile file to index-prod.html
in the webapp
directory:
sencha –sdk ext compile -classpath=app page -yui -in index-dev.html -out index-prod.html
This command will generate the index-prod.html
file and the all-classes.js
files in the webapp
directory as shown in the following screenshot:
The index-prod.html
file references the stylesheets directly and uses the single compiled and minified all-classes.js
file. You can now run the application and browse the index-prod.html
file as shown in the following screenshot:
You should notice a significant increase in the speed with which the logon window is displayed as all the JavaScript classes are loaded from the single all-classes.js
file.
The index-prod.html
file will be used by developers to test the compiled all-classes.js
file.
Accessing the individual pages will now allow us to differentiate between environments:
The logon window as displayed in the browser |
Page description |
---|---|
The You can access this page at
| |
The You can access this page at
| |
The You can access this page at |
18.119.103.204