Sencha Touch 2 Official document translation using views in your applications (using view)

Original address: http://www.cnblogs.com/dowinning/archive/2012/02/28/2371213.html

Objective:

The view is the face of an MVC application, and no matter how your application is designed, the user can see only the view that is in front of you, so your evaluation can only be achieved by viewing the image. So anyway, be sure to design your view with your heart.

The English site of this article is Http://docs.sencha.com/touch/2-0/#!/guide/views

The original title is: Using Views inyour applications( use view in application). In the official documentation directory, its de facto status is one of the first kick after the MVC overview, given the Sencha Touch MVC feature, this kick is reversed, and the C controller and the V view are finally the M data model, but its importance is not in order.

Sencha Touch Communication QQ Group 213119459 you are welcome to join.

Using views in your applications

using Views in an application

Note: For convenience, all occurrences of Sencha Touch in the text are substituted with ST shorthand.

From the user's point of view, your application is just a collection of views. Although much of the value of the app is in the Models and Controllers, the "What's the" and "the user interacts with Directl Y. In this guide we ' re going-to-look on how-to-create the views of that build your application.

From a user's point of view, your application is a collection of views, even though most of the valuable things in the application are in the data model and controller, but the view is something that interacts directly with the user. This guide will lead us to learn how to create a view to build an application.

Using Existing components

Working with existing components

The easiest-to-create a view is to just use ext.create with an existing Component. For example, if we wanted to create a simple Panel with some HTML inside we can just does this:

The simplest approach is to use ext.create to create an existing built-in component in St, which is also a view. For example, we just want to create a panel that contains simple HTML code, and we can do this:

Ext.create (' Ext.panel ', {

HTML: ' Welcome to my app ',

Fullscreen:true

});

This simply creates a Panel with some HTML and makes it fill the screen. You can-create any of our built-in components this-the-to-be-practice-is-create a subclass with your specializations And then create that. Thankfully that ' s simple too:

The example above will create a panel that contains HTML code and fill it with a screen. You can create any built-in component in this way, but the best way is to create a subclass of (built-in component) specifically, and then create an instance of the (custom) subclass. Fortunately, this is not a problem.

Ext.define (' MyApp.view.Welcome ', {

Extend: ' Ext.panel ',

Config: {

HTML: ' Welcome to my app ',

Fullscreen:true

}

});

Ext.create (' MyApp.view.Welcome ');

The outcome is the same and now we have a brand new component so we can create any number of times. This is the pattern we'll normally want to follow when building our App-create a subclass of a existing component then Create an instance of it later. Let's take a look through what we just changed:

The result of the above code is the same, but we now have a new component that we have named, and we can use this new component more than once. This is our recommended application development pattern: Create a subclass of an existing component and then create an instance of that subclass. Let's take a look at how this compares to the previous changes: Ext.define allows us to create a new class, extending an existing one (Ext.panel in this case)
Ext.define allows us to create a new class by inheriting an existing class (in this case, Ext.panel). We followed the MyApp.view.MyView convention for our new view class. You can name it whatever your like but we suggest sticking with convention
Follow MyApp.view.MyView's routine to name the new view, and we recommend that you do the same, not as you want. We defined config for the new class inside a Config object
We use the Config object to define its own parameters for the new class

Any of the config options available on Ext.panel can now is specified in either our new class's Config block or when we co Me to create our instance. When defining a subclass is sure to use the Config object, when creating just pass in an object.

All valid config properties for Ext.panel can be defined in the Config configuration block of the new class or passed in when the instance is created. When defining a subclass, be sure to use the Config object (which is actually a collection of configuration parameters wrapped with {}), which can also be passed to a set of Config objects when created.

For example, here's the same code again but with additional configuration passed in with our ext.create call:

The following example only builds on the code just now, passing in a new configuration parameter when ext.create.

Ext.define (' MyApp.view.Welcome ', {

Extend: ' Ext.panel ',

Config: {

HTML: ' Welcome to my app ',

Fullscreen:true

}

});

Ext.create (' MyApp.view.Welcome ', {

Stylehtmlcontent:true

});

A Real World Example

An example of a closer reality

The one of the view classes from our Twitter app:

This view class comes from our Twitter app:

Ext.define (' Twitter.view.SearchBar ', {

Extend: ' Ext.toolbar ',

Xtype: ' Searchbar ',

Requires: [' Ext.field.Search '],

Config: {

UI: ' Searchbar ',

Layout: ' VBox ',

CLS: ' Big ',

Items: [

{

Xtype: ' title ',

Title: ' Twitter Search '

},

{

Xtype: ' Searchfield ',

PlaceHolder: ' Search ... '

}

]

}

});

This follows the same pattern as Before-we ' ve created a new class called Twitter.view.SearchBar, which extends the frame Work ' s Ext.toolbar class. We also passed in some configuration options, including a layout and an items array.

It follows the aforementioned rules, creates a new subclass of the inheritance framework Ext.toolbar class, named Twitter.view.SearchBar, and we give it some configuration parameters, which contains a layout property and an items array.

We ' ve used a couple of new options this time:

This time we used two new parameters: Requires-because we ' re using a Searchfield in US items array, we tell us new view to require the EX T.field.search class. At the moment, the dynamic loading system does not recognize classes specified by xtype so we need to define the depend Ency manually
requires --because we use a Searchfield in the items array, we tell the view require (reference) Ext.field.Search class. This is done because the system auto-load feature is not yet able to recognize this class (Twitter.view.SearchBar) through xtype, so we have to manually define this dependency. Xtype-gives our new class their own xtype, allowing us to easily create it in a configuration object (just like we did With Searchfield above)
xtype --Give our new Class A own xtype so you can easily create it later with configuration parameters.

This allows us-to-create instances of our new view class in a couple of ways:

We can then create an instance of the new View (Twitter.view.SearchBar) in two ways.

Creates a standalone instance
Create a stand-alone instance

Ext.create (' Twitter.view.SearchBar ');

Alternatively, use Xtype to create our new class inside a Panel
Or we can create it in a panel by xtype Way

Ext.create (' Ext.panel ', {

HTML: ' Welcome to my app ',

Items: [

{

Xtype: ' Searchbar ',

Docked: ' Top '

}

]

});

Custom configurations and Behavior

Custom Configuration and behavior

Sencha Touch 2 makes extensive use of the configuration system to provide predictable APIs and keep the code clean and EAS ily testable. We strongly suggest you does the same in your own classes.

ST2 has extensively applied configuration systems to provide a manageable API and keep the code simple and easy to test. We strongly recommend that you do the same in your own class.

Let's say you want to create a image viewer of POPs up information about the image when you tap on it. Our aim was to create a reusable view that can configured with the image URL, title and description, and displays the TI Tle and description When you tap on it.

Suppose you want to create a picture browse view that pops up information about the image when it's clicked. Then of course we want this view to be very reusable, you can configure the image URL, title, description properties, and when you touch it will automatically pop up the title and description.

Most of the work around displaying images are taken care's for us by the ext.img component, so we'll subclass that:

The ext.img component has done a lot of work around the image display feature, so we inherited it to both:

Ext.define (' MyApp.view.Image ', {

Extend: ' Ext.img ',

Config: {

Title:null,

Description:null

},

Sets up our TAP event listener

Set Click event Listener

Initialize:function () {

This.callparent (arguments);

This.element.on (' Tap ', This.ontap, this);

},

This is called whenever-tap on the image

This function is called every time you touch the screen.

Ontap:function () {

Ext.Msg.alert (This.gettitle (), this.getdescription ());

}

});

Creates a full screen tappable image

Create a full-screen clickable picture

Ext.create (' MyApp.view.Image ', {

Title: ' Orion Nebula ',

Description: ' The Orion Nebula is rather pretty ',

SRC: ' http://apod.nasa.gov/apod/image/1202/oriondeep_andreo_960.jpg ',

Fullscreen:true

});

We ' re adding the configurations to our Class-title and Description-which both start off as null. When we create a instance of our new class we pass the title and description configs in just .

We have added two new configuration parameters to our class: Title and description, initially null by default. When we create an instance of this new class, we can pass the two arguments in the same way as other arguments.

Our new behavior happens in the Initialize and ONTAP functions. The Initialize function is called whenever any component are instantiated, so are a great place to set up behavior like even T listeners. The first thing we do are use this.callparent (arguments) to make sure the superclass ' Initialize function is called. This was very important, omitting this line may cause your the components of not to behave correctly.

The newly defined action occurs when initialized and clicked, and the Initialize function is called whenever the component is instantiated, so this is the most appropriate place to set up an event listener. The first thing we do here is to use this.callparent (arguments) to ensure that the initialization function of the parent class has been executed. This is important, ignoring this step may cause your component to not work correctly.

After callparent, we add a tap listener to the component ' s element, which would call our OnTap function whenever the Elemen T is tapped. All of the Sencha Touch 2 has an element property, which can use the this-a-listen to events on the DOM Obje CTS, add or remove styling, or do anything else you ' d normally does to an Ext.dom.Element.

After callparent, we add a tap listener to the component element, and when the element is clicked, the Ontap function is called. Each component of the ST2 has an element property that allows you to listen to the events of Dom objects, add and subtract styles, or do other things you've done with Ext.dom.Element before.

The ONTAP function itself is pretty simple, it just uses Ext.Msg.alert to quickly pops up some information about the image. Note that our new configs-title and Description-both receivegenerated getter functions (GetTitle and Getdescripti on respectively), as well as generated setter functions (Settitle and SetDescription).

The ONTAP function itself is very simple, it just uses Ext.Msg.alert to quickly pop up some information about the picture. Note that our two new parameters, title and description, are automatically given their corresponding getter methods (GetTitle and GetDescription), as well as setter methods (Settitle and SetDescription).

Advanced Configurations

Advanced Configuration

When you create a new configuration option to a class, the getter and setter functions is generated for your so a config C Alled ' border ' is automatically given Getborder and SetBorder functions:

When you create a new configuration parameter for a class, a pair of getter and setter methods are also generated, so a configuration parameter called border is automatically given the Getborder and SetBorder methods.

Ext.define (' MyApp.view.MyView ', {

Extend: ' Ext.panel ',

Config: {

Border:10

}

});

var view = ext.create (' MyApp.view.MyView ');

Alert (View.getborder ()); Alerts 10 (Eject 10)

View.setborder (15);

Alert (View.getborder ()); Now alerts 15 (popup 15)

The getter and setter aren ' t the only functions that is generated, there is a couple more so make life as a component Author much simpler-applyborder and Updateborder:

In addition to getter and setter, there will be a couple of ways to make developers feel good, Applyborder and Updateborder:

Ext.define (' MyApp.view.MyView ', {

Extend: ' Ext.panel ',

Config: {

border:0

},

Applyborder:function (value) {

return value + "px solid red";

},

Updateborder:function (NewValue, OldValue) {

This.element.setStyle (' border ', newvalue);

}

});

Our Applyborder function was called internally any time the border configuration was set or changed, including when the comp Onent is first instantiated. The-is-best place-to-put any code-transforms an input value. In this case we ' re going to take the border width passed in a return a CSS border specification string.

The Applyborder function is called every time the border parameter is set or changed, including the first time the component is instantiated. So this place is good for placing code that changes the parameter value format, in which case we can change the border width value into CSS string format.

This means if we set the view ' s border config to ten, our Applyborder function would make sure that we transform that Value to ' 10px solid red '. The Apply function is totally optional but note so you must return a value from it or nothing would happen.

This means that when I set the border parameter of the view to 10, the Applyborder function will turn this value into a string such as "10px solid red". Apply function You can not use, but remember in this function must return a value, otherwise there is no effect.

The Updateborder function is called after the Applyborder function have had a chance to transform the value, and is usually Used to modify the DOM, send AJAX requests or perform any other kind of processing. In our case we ' re just getting the view ' s element and updating the border style using SetStyle. This means, every time setborder is called our DOM would immediately be updated to reflect the new style.

The Updateborder function is called after Applyborder has converted the incoming values, and is often used to adjust the DOM, send AJAX requests, or do something else. In this example we just get the element elements of the view and update their border style with the SetStyle method, meaning that each time the SetBorder method is called, the DOM is immediately updated to the latest style.

Here's a example of the new view in action. Click the Code Editor button to see the source-basically we just create a instance of the new view and dock a spinner F Ield at the top, allowing us to change the border width by tapping the spinner buttons. We Hook into the Spinner's spin event and call our view's new SetBorder function from there:

Here is the new view of the sample code, see the source, we created a new view of the instance and in an attempt to place a close to the top of the Spiiner, in order to achieve the click on the Spinner button can change the border width, we listen to spinner spin events, Call the view SetBorder method inside.

As before

//