Sencha Cmd is a command line tool code generator for ExtJS. It lets you create starter projects, deployment builds and a lot of more things with ease.
Download: http://www.sencha.com/products/sencha-cmd/download
Documentation: http://docs.sencha.com/ext-js/4-1/#!/guide/command
Prerequisits
You need to have at least ExtJS 4.1.1a downloaded.
On my machine, I downloaded and unpacked it into
~/develop/js/Sencha/ext-4.1.1a
You also need to have ruby
prepared with compass
and sass
.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
Take a look into rvm which lets you manage local ruby
installations with sandboxed gemsets.
… in short:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
|
The sencha command
After you installed Sencha Cmd, you should have the sencha
command available
in your terminal:
1 2 |
|
There are a bunch of arguments available, type sencha help
to view them.
Bootstrapping a new application
Now we can use the sencha generate
command to generate a new MVC like ExtJS App.
MVC Application Architecture
1 2 3 |
|
This command copies over the ExtJS library for us and generates a basic filesystem structure with example content.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
|
Serve the new App
A very simple way to serve your app is with this one-liner:
1
|
|
Now open up a webbrowser of your choice and go to
You should see an empty border layout with a west and center area. The center area should contain a single tab titled “Center Tab 1”.
Congratulations, you just build a sencha app with one command:)
Adding a model to the Application
As shown in the MVC Application Architecture tutorial, we’re going to add a user model with the following command:
1
|
|
This command adds a Model.js
to your app/model
directory.
The content should look like this:
1 2 3 4 5 6 7 8 9 |
|
Adding a view to the Application
We would like to have a view for all the Users of our Application
1
|
|
This will add a view stub called List.js
in app/view/user
.
The output is really basic:
1 2 3 4 |
|
We have to change it to be useful:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
As you can see, we reference a store here called Users
.
There is no sencha command to create a store, so we’re going to add it manually.
Adding a store to the Application
Add a file Users.js
to your app/store
directory.
The code should look like this:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
|
Note the url for the data. it should be located at /data/users.json
.
Create the direcotry data
in your application root folder and add the file
users.json
with the following contents:
1 2 3 4 5 6 7 |
|
Putting everything together
What do we have so far:
- A model, which is capable to hold a single user
- A store, which knows how to fetch the data from the server and how to store the data internally as instances of our user model
- A grid view, which knows the users store to display a list of users
- Fake data in
data/users.json
Now we need to get it somehow on the screen.
First we have to modify the app.js
a little bit, so that it knows our store.
It should look like this:
1 2 3 4 5 6 7 8 9 |
|
As we gave our view an alias
property of widget.userlist
, we can simply use
the part after the dot directly as an xtype
in our viewport:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
|
After reloading, we should see two user entries in our grid.
Building a deployment package
Next step is to build an deployment package for our app. Open up the developer tools console of Google Chrome.
Reload the application with the Network
Tab opened.
At the bottom of all the requests, there should be a line which shows something like this:
1
|
|
Stop the local Python web server and type in the follwing commands
1 2 3 4 |
|
Reload the application with the Network
Tab opened.
At the bottom of all the requests, there should be a line which shows something like this:
1
|
|
With the deployment version, we reduced the requests from 217 to 8 and the size is almost 4 times less than before.