The generation game

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.

Note

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.

Note

Pay attention to the case of names of your models, views, and controllers here. Sencha Cmd doesn't do anything special to correct the case to keep with expected naming conventions. So, whatever you type will be directly carried over to the class.

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.

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

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