Sencha, Build and Repository

A Sencha app is made by many source files and other fixed files generated by the framework. The files full of information are:

• app/
• resources/
• app.js
• app.json
• sass/

The other files can be ignored (see Ignored Files).

Only the files above are committed, this decrease the repository size. The following procedure is used to make a new checkout of the project.

Requirements

• Sencha Cmd 5+
• ExtJS 5+

You can specify the software versions in the README.md file.

Generation

With Workspace

# Checkout
hg clone <project_url> <checkout_dir>
# Workspace Generation
sencha -sdk <extjs_dir> generate workspace <workspace_dir>
# Optional - ext directory symlink
cd <workspace_dir>
rm -rf ext
ln -s <extjs_dir> ext
# App generation
cd <workspace_dir>
sencha -sdk ext generate app <app_name> <app_dir>
# Copy project files into generated project
cd <app_dir>
cp -r <checkout_dir>/* .
# Remove checkout
rm -rf <checkout_dir>

Without Workspace

# Checkout
hg clone <project_url> <checkout_dir>
# App generation
sencha -sdk <extjs_dir> generate app <app_name> <app_dir>
# Optional - ext directory symlink
cd <app_dir>
rm -rf ext
ln -s <extjs_dir> ext
# Copy project files into generated project
cd <app_dir>
cp -r <checkout_dir>/* .
# Remove checkout
rm -rf <checkout_dir>

Build

Now you can browse <app_dir> and enter the commands:

sencha app watch # development
sencha app build # production

Ignored Files

For a new project .hgignore will contain generated files

^\.sencha$
^sass/example$
^sass/config.rb$
^bootstrap.*$
^build.xml$ // remove this line if you want to enable cache
^index.html*$

Extra Styles and Script

Every other css or js file is added to app.json in the sections css e js

"css": [{
    "path": "bootstrap.css",
    "bootstrap": true
}, {
    "path": "resources/fontawesome.min.css"
}],

Enable Cache

Sencha does not use cache by default. You can enable it by adding the following code in app.json

production": {
    "loader": {
        "cache": true
    }
},

It's recommended to add a task in the build.xml that renames app.js using its own md5

<target name="-after-build">
    <checksum file="${build.dir}/app.json" property="md5"/>
    <x-echo message="After Build: add md5 to app.js"/>
    <move file="${build.dir}/app.js" tofile="${build.dir}/app.${md5}.js"/>
    <replace token="app.js" value="app.${md5}.js" file="${build.dir}/app.json"/>
    <replace token="app.js" value="app.${md5}.js" file="${build.dir}/index.html"/>
    <x-echo message="app.js checksum ${md5}"/>
</target>