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.jsapp.jsonsass/
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
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*$
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>
