Compiling for production use

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.

Note

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:

Compiling for production use

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:

Compiling for production use

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

Compiling for production use

The index.html page was generated by Sencha Cmd and has been configured to use the gray theme in bootstrap.css. This page is no longer needed for development; use index-dev.html instead.

You can access this page at

http://localhost:8080/index.html

Compiling for production use

The index-dev.html page uses the classic theme stylesheet included outside the <!-- <x-compile> --> directive. Use this file for application development. Ext JS 4 will dynamically load source files as required.

You can access this page at

http://localhost:8080/index-dev.html

Compiling for production use

The index-prod.html file is dynamically generated by the Sencha Cmd compile command. This page uses the all-classes.js all-in-one compiled JavaScript file with the classic theme stylesheet.

You can access this page at http://localhost:8080/index-prod.html

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
18.119.103.204