From here, we can quickly build out the skeleton of our application. The key MVVM classes are controllers, models, and views (with their associated view controllers and view models). Sencha Cmd can assist with quickly creating all of these classes.
The generation of code using a command-line tool is often known as "scaffolding" and was popularized by Ruby On Rails. For more on the subject, refer to http://en.wikipedia.org/wiki/Scaffold_(programming).
For controllers, it's simple:
sencha generate controller MyController
The preceding command produces:
// app/controller/MyController.js Ext.define('MyApp.controller.MyController', { extend: 'Ext.app.Controller' });
Then, the model generator invoked looks like this:
sencha generate model MyModel fullName:string,age:int
MyModel
is the name of the model straightforward. The next parameters allow generation of fields in the model (provided as a comma-separated list of name:type
field pairs). In this case, we're creating two fields: fullName
of type string and age
of type integer. This gives us the following code:
// app/model/MyModel.js Ext.define('MyApp.model.MyModel', { extend: 'Ext.data.Model', fields: [ { name: 'name', type: 'string' }, { name: 'age', type: 'int' } ] });
Finally, there's the following view generator:
sencha generate view my.MyView
This creates a few files for us, as shown here:
// app/view/my/MyView.js Ext.define("MyApp.view.my.MyView",{ "extend": "Ext.panel.Panel", "controller": "my-myview", "viewModel": { "type": "my-myview" }, "html": "Hello, World!!" }); // app/view/my/MyViewController.js Ext.define(MyApp.view.my.MyViewController', { extend: 'Ext.app.ViewController', alias: 'controller.my-myview' }); // app/view/my/MyViewController.js Ext.define('MyApp.view.my.MyViewModel', { extend: 'Ext.app.ViewModel', alias: 'viewmodel.my-myview', data: { name: 'MyApp' } });
With this command, as we're creating multiple files, we have the opportunity to create a directory and corresponding namespace to contain them. In this case, we created the my
directory at app/view/my
for these three files.
There are two more commands we can run with generate: theme
and package
, but we'll cover these in more detail later in Chapter 9, A Shopping Application, when we build a packaged component with a custom theme.