Sencha Touch 2 使用视图.docx

1、Sencha Touch 2 使用视图前言：视图View是MVC应用程序的脸面，不管你的应用程序设计如何，用户都只能看到眼前的视图，因此对你的评价也只能通过对视图的体验来得到。因此无论如何，一定要用心去设计你的视图。这篇文章的英文原址是原文标题是：Using Views in your Applications（在应用程序中使用视图）。在官方文档目录中，它事实上的地位是MVC概述之后开篇三板斧之一，鉴于Sencha Touch MVC的特点，这三板斧的介绍顺序是倒过来的，先C控制器再V视图最后才是M数据模型，但是其重要性却不分先后。Sencha Touch 交流QQ群213119459欢迎您的

2、加入。Using Views in your Applications在应用程序中使用视图注：为方便起见，文中所有出现 Sencha Touch 的地方均以 ST 简写替代。From the users 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 Views are what the user interacts with directly. In this gu

3、ide were going to look at how to create the views that build your application.从用户的视角来看，你的应用程序就是一堆视图的集合，尽管应用程序大部分有价值的东西都在数据模型和控制器里，但视图才是直接跟用户互动的东西。这篇指南将带我们学习如何创建视图来搭建应用程序。Using Existing Components使用现存组件The easiest way to create a view is to just use Ext.create with an existing Component. For example,

4、 if we wanted to create a simple Panel with some HTML inside we can just do this:最简单的方法是使用Ext.create来创建一个ST中现存的内置组件，这同样也是一个视图。例如我们只想要创建一个包含简单html代码的Panel，我们可以这么做：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.

5、You can create any of our built-in components this way but best practice is to create a subclass with your specializations and then create that. Thankfully thats simple too:上述例子将会创建一个包含html代码的Panel并使其充满屏幕。你可以用这种方法创建任意内置组件，不过最好的方式还是专门创建一个（内置组件的）子类，然后再来创建这个（定制后的）子类的实例。幸好这也不是什么麻烦事儿。Ext.define(MyApp.vie

6、w.Welcome, extend: Ext.Panel, config: html: Welcome to my app, fullscreen: true );Ext.create(MyApp.view.Welcome);The outcome is the same, but now we have a brand new component that we can create any number of times. This is the pattern well normally want to follow when building our app - create a su

7、bclass of an existing component then create an instance of it later. Lets take a look through what we just changed:上述代码的结果是一样的，但是我们现在有了一个自己命名的新组件，而且以后我们还可以多次使用这个新组件。这才是我们推荐的应用开发模式：创建一个现存组件的子类然后再创建该子类的实例。我们来看一下这种方式跟前面相比有哪些变化： Ext.define allows us to create a new class, extending an existing one (Ext.

8、Panel in this case)Ext.define允许我们通过继承一个存在的类（此例中是Ext.Panel）来创建一个新类。 We followed the MyApp.view.MyView convention for our new view class. You can name it whatever you like but we suggest sticking with convention遵循MyApp.view.MyView的常规来给新视图命名，我们也推荐你这样做，而不要随心所欲 We defined config for the new class inside

9、a config object我们使用config对象为新类定义它自己的参数Any of the config options available on Ext.Panel can now be specified in either our new classs config block or when we come to create our instance. When defining a subclass be sure to use the config object, when creating just pass in an object.此时Ext.Panel的所有有效co

10、nfig属性都可以在新类的config配置块中进行定义或者在创建实例时传入使用了。定义子类的时候务必使用config对象（其实就是用包裹的一系列配置参数的集合），创建的时候也可以传入一个config对象集合。For example, heres the same code again but with additional configuration passed in with our Ext.create call:下面的例子只在刚才代码基础之上，在Ext.create时传入了一个新的配置参数。Ext.define(MyApp.view.Welcome, extend: Ext.Panel

11、, config: html: Welcome to my app, fullscreen: true );Ext.create(MyApp.view.Welcome, styleHtmlContent: true);A Real World Example一个更贴近现实的例子This is one of the view classes from our Twitter app:这个视图类来自于我们的Twitter应用：Ext.define(Twitter.view.SearchBar, extend: Ext.Toolbar, xtype : searchbar, requires: Ex

12、t.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 - weve created a new class called Twitter.view.SearchBar, which extends the frameworks Ext.Toolbar class. We

13、also passed in some configuration options, including a layout and an items array.它遵循前面提到的规则，创建了一个继承框架Ext.Toolbar类的新子类，命名为Twitter.view.SearchBar，我们给它传入一些配置参数，其中包含了一个layout属性和items数组。Weve used a couple of new options this time:这次我们使用了两个新的参数： requires - because were using a searchfield in our items arr

14、ay, we tell our new view to require the Ext.field.Search class. At the moment the dynamic loading system does not recognize classes specified by xtype so we need to define the dependency manuallyrequires 由于我们在items数组中使用了一个searchfield，因此要告诉视图require（引用）Ext.field.Search类。之所以要这样做是因为此时的系统自动加载功能还无法通过xtyp

15、e识别这个类（Twitter.view.SearchBar），所以我们不得不手动定义这个依赖项。 xtype - gives our new class its own xtype, allowing us to easily create it in a configuration object (just like we did with searchfield above)xtype 给我们的新类一个自己的xtype，这样以后就可以轻松地通过配置参数轻松的创建它了。This allows us to create instances of our new view class in a

16、couple of ways:以后我们就可以通过两种方式来创建新视图（Twitter.view.SearchBar）的实例了。/creates a standalone instance/创建一个独立的实例Ext.create(Twitter.view.SearchBar);/alternatively, use xtype to create our new class inside a Panel/或者我们在一个Panel中通过xtype方式来创建它Ext.create(Ext.Panel, html: Welcome to my app, items: xtype: searchbar,

17、 docked: top );Custom Configurations and Behavior自定义配置和行为Sencha Touch 2 makes extensive use of the configuration system to provide predictable APIs and keep the code clean and easily testable. We strongly suggest you do the same in your own classes.ST2广泛应用了configuration系统来提供可控性好的API并保持代码简洁和容易测试。我们强烈

18、建议你在自己的类里面也这么做。Lets say you want to create a image viewer that pops up information about the image when you tap on it. Our aim is to create a reusable view that can be configured with the image url, title and description, and displays the title and description when you tap on it.假设你要创建一个图片浏览视图，当它被点击

19、的时候会弹出该图片的信息。那么我们当然希望这个视图有很好的重用性，你可以配置图片url、标题、描述属性，并且当点触的时候会自动把标题和描述弹出来。Most of the work around displaying images is taken care of for us by the Ext.Img component, so well subclass that:Ext.Img组件已经围绕图片展示功能做了大量的工作，因此我们继承它既可：Ext.define(MyApp.view.Image, extend: Ext.Img, config: title: null, descripti

20、on: null ,/sets up our tap event listener/设置点击事件监听器 initialize: function() this.callParent(arguments); this.element.on(tap, this.onTap, this); ,/this is called whenever you tap on the image/每当你点触屏幕的时候就会调用这个函数 onTap: function() Ext.Msg.alert(this.getTitle(), this.getDescription(); );/creates a full s

21、creen tappable image/创建一个全屏的可点击的图片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);Were adding two more configurations to our class - title and description - which bo

22、th start off as null. When we create an instance of our new class we pass the title and description configs in just like any other configuration.我们给自己的类增加了两个新的配置参数：title和description，初始都默认为null。当我们创建这个新类的实例时，我们可以像传递其他参数一样把这两个参数传递进去。Our new behavior happens in the initialize and onTap functions. The i

23、nitialize function is called whenever any component is instantiated, so is a great place to set up behavior like event listeners. The first thing we do is use this.callParent(arguments) to make sure the superclass initialize function is called. This is very important, omitting this line may cause yo

24、ur components not to behave correctly.新定义的动作在初始化和点击的时候发生，initialize函数每当组件实例化的时候都会被调用，所以这个地方用来设置事件侦听器是最合适的。在这里我们做的第一件事是使用this.callParent(arguments)来确保父类的初始化函数已经被执行。这很重要，忽略这一步可能会导致你的组件无法正确的工作。After callParent, we add a tap listener to the components element, which will call our onTap function whenever

25、 the element is tapped. All components in Sencha Touch 2 have an element property that you can use in this way to listen to events on the DOM objects, add or remove styling, or do anything else youd normally do to an Ext.dom.Element.在callParent之后，我们给组件的element增加了一个tap侦听器，当这个element被点击时，onTap函数就会被调用。

26、ST2的每一个组件都有一个element属性，通过它你可以侦听Dom对象的事件，增删样式，或者做其他你以往用Ext.dom.Element来做的事情。The onTap function itself is pretty simple, it just uses Ext.Msg.alert to quickly pop up some information about the image. Note that our two new configs - title and description - both receive generated getter functions (getTi

27、tle and getDescription respectively), as well as generated setter functions (setTitle and setDescription).onTap函数本身非常简单，它只是使用Ext.Msg.alert来快速弹出一些关于图片的信息。注意我们的两个新参数title和description都自动获得了其对应的getter方法（getTitle和getDescription），同样还有setter方法（setTitle和setDescription）。Advanced Configurations高级配置When you cr

28、eate a new configuration option to a class, the getter and setter functions are generated for you so a config called border is automatically given getBorder and setBorder functions:当你为类创建一个新的配置参数时，一对getter和setter方法也会被生成，因此一个叫做border的配置参数会自动被给予getBorder和setBorder方法。Ext.define(MyApp.view.MyView, exten

29、d: Ext.Panel, config: border: 10 );var view = Ext.create(MyApp.view.MyView);alert(view.getBorder(); /alerts 10（弹出10）view.setBorder(15);alert(view.getBorder(); /now alerts 15（弹出15）The getter and setter arent the only functions that are generated, there are a couple more that make life as a component

30、author much simpler - applyBorder and updateBorder:除了getter和setter之外还会生成一对让开发者感到很爽的方法，applyBorder和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.setS

31、tyle(border, newValue); );Our applyBorder function is called internally any time the border configuration is set or changed, including when the component is first instantiated. This is the best place to put any code that transforms an input value. In this case were going to take the border width passed in an return a CSS border specification string.applyBorder函数会在每次border参数设置或者改变的时候被调用，包括