Sencha Touch 2 使用视图.docx

前言：视图[View]是MVC应用程序的脸面，不管你的应用程序设计如何，用户都只能看到眼前的视图，因此对你的评价也只能通过对视图的体验来得到。因此无论如何，一定要用心去设计你的视图。这篇文章的英文原址是/touch/2-0/#!/guide/views原文标题是：Using Views in your Applications（在应用程序中使用视图）。在官方文档目录中，它事实上的地位是MVC概述之后开篇三板斧之一，鉴于Sencha Touch MVC的特点，这三板斧的介绍顺序是倒过来的，先C控制器再V视图最后才是M数据模型，但是其重要性却不分先后。Sencha Touch 交流QQ群213119459欢迎您的加入。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 guide 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, 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. 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.view.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 subclass of an existing component then create an instance of it later. Lets take a look through what we just changed:上述代码的结果是一样的，但是我们现在有了一个自己命名的新组件，而且以后我们还可