Sencha Touch 2 Official document translation Controllers (Controller Learning Guide)

Original address: http://www.cnblogs.com/dowinning/archive/2012/02/16/2354772.html

Objective:

Controller [controllers] play a role in Sencha Touch MVC, which controls the presentation logic of the view and is responsible for data processing logic (including loading, displaying, updating, adding and deleting data) based on the data model. The controller is like glue, and with it it's able to glue together the elements of a Sencha Touch (all the way back to the St) application [application] to coordinate the work and accomplish the desired task.

Article English original site is: http://docs.sencha.com/touch/2-0/#!/guide/controllers

The original title is Controllers , literal translation is the controller, but in the official document also known as Controllers Guide, I think with this title more biopsied some.

Sencha Touch chat QQ Group 213119459

Controllers Guide

Controller Learning Guide

Controllers is responsible for responding to events that occur within your app. If your app contains a Logout button that your user can tap on, a Controller would listen to the button ' s tap event and TA Ke the appropriate action. It allows the View classes to handle the display of data and the Model classes to handle theloading and saving of data-t The He Controller is the glue, that binds them together.

The controller responds to events that occur in the application, and if your application contains a logout button that lets the user click, then there should be a controller to listen for the button's click events and then respond appropriately. The controller is like glue, which controls the view class to present the data and loads and saves the data through the data model class, so the two are bonded together.

Relation to Ext.app.Application

The relationship between controller and Ext.app.Application

Controllers exist within the context of an application. An application usually consists of a number of Controllers, each of which handle a specific part of the app. For example, a application that handles the orders for an online shopping site might has controllers for orders, custome RS and products.

A controller exists in the context of an application, and an application typically consists of several controllers, each of which is responsible for implementing a specific functional part of the application, such as an application that processes an online marketplace sales order, which may contain orders, customers, products, and so on.

All of the Controllers is application uses is specified in the application ' s Ext.app.Application.controllers config. The application automatically instantiates each Controller and keeps references to each, so it's unusual to need to inst Antiate Controllers directly. By convention all controllers are named after the thing (usually the Model) that it deals with primarily, usually in the PL ural-for example if your app is called ' MyApp ' and you had a Controller that manages products, convention was to create A MyApp.controller.Products class in the file App/controller/products.js.

All the controllers used in the application are declared in Ext.app.Application.controllers, and the application automatically instantiates each controller and keeps a reference to them, so we generally do not have to instantiate the controller directly. By convention, the naming of each controller should correspond to what he is dealing with (usually the data model), and often in the plural form. For example, your application is called "MyApp", you need a controller to manage the product, and you should create a MyApp.controller.Products class in the App/controller/products.js file as usual.

Refs and Control

refs and control (two parameters in a controller constructor)

The centerpiece of Controllers is the twin configurations refs and control. These is used to easily gain references to components inside your apps and to take action on them based in events that the Y fire. Let's look at refs first:

The core part of the controller is the twin parameters of refs and control, which are used to obtain a reference to the components contained in the application and to deal with the events they trigger, first looking at refs.

Refs

Refs leverage the powerful componentquery syntax to easily locate are on your page. We can define as many refs as we like for each Controller, for example here we define a ref called ' Nav ' that finds a Comp Onent on the page with the ID ' Mainnav '. We then use this ref in the Addlogoutbutton beneath it:

Refs expands the already powerful componentquery syntax, making it easy to locate components on a Web page, where each controller can define multiple refs subkeys, for example here we define a ref called "Nav" to refer to the page with the id "Mainnav" Component, we'll use it in the Addlogoutbutton function below.

Ext.define (' MyApp.controller.Main ', {

Extend: ' Ext.app.Controller ',

Config: {

Refs: {

Nav: ' #mainNav '

}

},

Addlogoutbutton:function () {

This.getnav (). Add ({

Text: ' Logout '

});

}

});

Usually, a ref is just a key/value pair-the keys (' nav ' in this case) are the name of the reference that would be generated The value (' #mainNav ' in this case) was the Componentquery selector that would be used to find the Component.

Usually a ref is a key-value pair, the key name ("NAV" in this case) is the name of the upcoming ref reference, and the value ("#mainNav" in this case) is the componentquery selector used to find the component.

Underneath that, we had created a simple function called Addlogoutbutton which uses this ref via its generated ' Getnav ' F Unction. These getter functions is generated based on the refs all define and always follow the same format-' get ' followed by th E capitalized ref name. In this case we ' re treating the Nav reference as though it's a Toolbar, and adding a Logout button to it when our function is called. This ref would recognize a Toolbar like this:

Later we created a simple function called Addlogoutbutton, which uses this ref through a method called "Getnav", which is automatically generated based on the ref name that you define in refs, according to the specified format. That is, the ref name immediately followed by the (first letter) capital of the Get. In this example we set the Nav to a toolbar toolbar, and the call to Addlogoutbutton adds a logout button to the Nav toolbar, which identifies a toolbar similar to the following:

Ext.create (' Ext.toolbar ', {

ID: ' Mainnav ',

Items: [

{

Text: ' Some Button '

}

]

});

Assuming this Toolbar have already been created by the time we run our ' Addlogoutbutton ' function (we'll see how that's in Voked later), it'll get the second button added to it.

Assuming that the toolbar has been created (see the code, it has a button in it), after we call the ' Addlogoutbutton ' function, it is added with a second button.

Advanced Refs

Refs Advanced

Refs can also be passed a couple of additional options, beyond name and selector. These is autocreate and xtype, which is almost always used together:

In addition to name and selector, the value of refs can also accept another pair of parameters, that is, Autocreate and xtype, and they almost always appear together.

Ext.define (' MyApp.controller.Main ', {

Extend: ' Ext.app.Controller ',

Config: {

Refs: {

Nav: ' #mainNav ',

Infopanel: {

Selector: ' TabPanel panel[name=fish] infopanel ',

Xtype: ' Infopanel ',

Autocreate:true

}

}

}

});

We ' ve added a second ref to our Controller. Again The name is the key, ' Infopanel ' on this case, but this time we ' ve passed an object as the value instead. This time we've used a slightly more complex selector query-in The example imagine that your app contains a tab panel a nd that one of the items in the tab panel has been given the name ' fish '. Our selector matches any Component and the xtype ' Infopanel ' Inside that tab panel item.

We added a second ref to the controller, the same name ' Infopanel ' as the key, but this time the value was an object, and in addition we used a slightly more complex selector, In this example we assume that your application contains a tabpanel and that one of the item's name is ' fish ', and the selector matches the component xtype type ' Infopanel ' in the item.

The difference is so if that Infopanel does not exist already inside the ' fish ' panel, it'll be automatically cre Ated when to call This.getinfopanel inside your Controller. The Controller is able to does this because we provided the xtype to instantiate with in the event that the selector does not return anything.

The problem here is that the Infopanel does not exist in a panel called ' Fish ', and when we call the This.getinfopanel method in the controller, it automatically creates a infopanel. This is possible because the selector cannot return any eligible objects, but because we provide the Xtype type, the controller can simply create one yourself.

Control

The sister config to refs is control. Control is the means by which your listen to events fired by components and has your Controller react in some. Control accepts both Componentquery selectors and refs as its keys, and listener objects as values-for example:

The associated configuration properties of refs are control (because they are almost always paired), control is a means by which you can listen for events triggered by a component and make your controller react in some way. Control can accept both the Componentquery selector and the refs name as its key name, but the control value must be a listener object, such as the following:

Ext.define (' MyApp.controller.Main ', {

Extend: ' Ext.app.Controller ',

Config: {

Control: {

Loginbutton: {

Tap: ' Dologin '

},

' Button[action=logout] ': {

Tap: ' Dologout '

}

},

Refs: {

Loginbutton: ' Button[action=login] '

}

},

Dologin:function () {

Called whenever the Login button is tapped

},

Dologout:function () {

Called whenever any Button with Action=logout is tapped

}

});

Here we had set up the control declarations-one for our Loginbutton ref and the other for any Button on the page that H As been given the action ' logout '. For each declaration we passed in a single event handler-in each case listening for the ' tap ' event, specifying the ACTI On that should is called when that Button fires the tap event. Note that we specified the ' Dologin ' and ' dologout ' methods as strings inside the control block-this is important.

Here we give two control declarations, one for ref named Loginbutton, and the other for all action on the page that is set to logout. We have passed an event handler for each statement to hear which button the tap event came from and which button the specified response action will be executed. It is important to note that we use strings to specify the Dologin and Dologout functions in the control code block.

You can listen to as many events as your like in each control declaration, and mix and match Componentquery selectors and R EFS as the keys.

Each control declaration can listen to multiple events as you want, and allows mixing the componentquery selector with refs as the control key.

Routes

Routing

As of Sencha Touch 2, Controllers can now directly specify which routes they is interested in. This enables us-to provide-within our app, as-well as the ability-to-deeply link to all part of the Applic ation that we provide a route for.

In ST2, the controller can directly specify which route is of interest to it. This allows us to provide access history support in the application, and we can also provide a deep link to the route, that is, any link to any part of the application.

For example, let's say we have a Controller responsible for logging in and viewing user profiles, and want to make those s Creens accessible via URLs. We could achieve that as this:

Let's say we have a controller that responds to logging in and browsing user profiles, and we want these interfaces to be directly accessible through URLs, and we can do this:

Ext.define (' MyApp.controller.Users ', {

Extend: ' Ext.app.Controller ',

Config: {

Routes: {

' Login ': ' Showlogin ',

' User/:id ': ' Showuserbyid '

},

Refs: {

Main: ' #mainTabPanel '

}

},

Uses our ' main ' ref above to add a loginpanel to our main TabPanel (Note that

When adding Loginpanel to the main tabpanel, it is necessary to use ref, which is called Main, as defined above.

' Loginpanel ' is a custom xtype created for this application)

Note that ' Loginpanel ' is a xtype type that we have customized for this application

Showlogin:function () {

This.getmain (). Add ({

Xtype: ' Loginpanel '

});

},

Loads The User then adds a ' userprofile ' view to the main TabPanel

Load the user model and add a userprofile view to the main TabPanel interface

Showuserbyid:function (ID) {

MyApp.model.User.load (ID, {