《(入门篇05)intro to applications with sencha touch 2》由会员分享，可在线阅读，更多相关《(入门篇05)intro to applications with sencha touch 2（7页珍藏版）》请在金锄头文库上搜索。
1、Intro to Applications with Sencha Touch 2作者：一夕 QQ：944281625本系列文章为翻译文章，翻译自 API 文档，也是入门级别的文章，请初学者仔细阅读，如果翻译有不妥的地方，请谅解，如果转载请注明作者及出处。Sencha Touch 2 旨在实现应用程序跨平台的高效开发。为了尽可能简单的编写应用程序，ST2 为我们提供了一个简单而功能强大的应用程序体系结构，即 MVC。在该体系结构下，使我们的代码简洁，可测试并且易于维护，还有诸多的好处：1.History Support：在你的应用程序中提供了一个完整的 back 按钮，可以链接到应用程序的任何
2、部分。2.Deep Linking：当我们分享 deep links 时，在屏幕上打开任何界面的时候，都像是链接到一个 Web 界面。3.Device Profile：使用通用代码便可以让我们轻松的为手机或者平板电脑定制自己的UI。Anatomy of an Application一个应用程序其实就是 Models，Views，Controllers，Stores 和 Profiles 的集合，只不过附加了一些特殊的元素，例如程序的图标或者加载图片等等。Model：在应用程序中代表了一个对象类型，简单理解便是数据模型。View：利用 Sencha Touch 内部组件，负责向用户显示数据，简单
3、解释便是视图。Controller：处理应用程序的交互，监听事件并作出响应，简单理解就是控制器。Store：负责将数据加载到我们的应用程序当中。Profile：为的是在尽可能多的通用代码下，为手机和平板电脑定制 UI。简单理解就是配置文件，如果是手机应该加载怎样的 UI，平板电脑则加载什么样的 UI。通常我们在 Sencha Touch 的应用程序中都会这样编写 application：Ext.application(name: MyApp,models: User, Product, nested.Order,views: OrderList, OrderDetail, Main,contr
4、ollers: Orders,launch: function() Ext.create(MyApp.view.Main); );那么我们就对以上代码进行简单分析：name：便是我们定义的命名空间，我们的所有代码都在该空间下编写，类似 Java 中的顶级包名。在上面的代码中，我们我们知道，在 view 文件夹下有 Main.js 文件，就等价于该文件的存在路径为 MyApp.view.Main。我们通过 models,views 和 controllers 来加载相应目录下的文件。至于依赖加载，我们的其他章节会为你阐述的。Controllerscontroller 是程序的中心，它把程序的各部
5、分有机的结合在一起，并统一运行控制，使我们的程序正常运行。比如，view 中存放的仅仅是页面布局等代码，关于页面逻辑处理的代码几乎都存放在 controller 中了，实现逻辑代码的统一管理。A simple example接下来的例子展示给我们如何快速的定义控制器。在这里我们使用两个比较常用的控制器配置项：refs 和 control。通过 refs，我们可以轻松的在一个页面中找到任何的组件。在本例中，我们将匹配 xtype 为 formpanel 的组件，并将第一个匹配的作为 loginForm，并在 doLogin 函数之后使用该属性。第二件事情便是建立起一个 control 配置项。就
6、像 refs，它使用一个组件查询器来找到所有的 formpanel。看看下面具体的代码再说吧：Ext.define(MyApp.controller.Sessions, extend: Ext.app.Controller,config: refs: loginForm: formpanel,control: formpanel button: tap: doLogin,doLogin: function() var form = this.getLoginForm(),values = form.getValues();MyApp.authenticate(values); );doLogi
7、n 函数本身是很简单的，因为在定义一个 loginForm 的 refs 的时候，控制器会自动为我们生成一个 getLoginForm 的函数，返回我们需要的那个 formpanel。简单理解上面代码的作用便是：refs 是我们声明的组件的引用，control 中是我们对这些组件需要监听的事件以及触发的函数。refs 是指向，control 是控制。StoresStores 是 Sencha Touch 中特别重要的部分，并且大多数的窗体都会绑定数据的。简单来说，store 其实就像是 model 的数据实体。例如 List 和 DataView 这些组件，渲染的都是store 中的 mode
8、l 的实体。因为 model 的实体被添加或者从 store 中移除时，都会触发这些组件所绑定的数据监听，达到更新或者其他操作的目的。Device Profiles我们知道，Sencha Touch 程序会运行在不同设备上，这些设备有着不同的功能或者屏幕分辨率。例如一个用户界面可能比较适合于平板电脑，但是在手机中就显得不是那么合适了，反之亦然。然而我们在编写应用程序的时候，并不想为每一设备都单独写一个程序，那样太麻烦了，我们更倾向于写好的程序，本身能够在手机或者平板电脑中运行并根据设备进行不同的加载，显示不同的 UI 风格，这是我们便要用好 profile 文件了。profile 文件只是简单
9、的告诉程序，如何针对不同的设备进行不同的加载，我们通常在程序开始的时候便声明它：Ext.application(name: MyApp,profiles: Phone, Tablet,/as before );一旦我们像上面这段代码一样，声明了我们的 profile 文件，那么程序在加载的过程当中，就会去加载我们 app/profile 目录下的相应 JS 文件了。我们可以看看下面这段代码是如何定义一个平板电脑的配置文件的：Ext.define(MyApp.profile.Tablet, extend: Ext.app.Profile,config: controllers: Groups,v
10、iews: GroupAdmin,models: MyApp.model.Group,isActive: function() return Ext.os.is.Tablet; );只要 Sencha Touch 认为我们的应用程序是运行在平板电脑上的时候，isActive 函数便会返回 true。其实这个判断并不是很准确的，因为目前的平板电脑和手机并没有很明显的界限，所有 Sencha Touch 在进行判断的时候，只识别 ipad，对于其他的平板电脑都会返回false 的，也就是说除了 ipad，其他的都看做是手机。不过你也可在 isActive 函数中进行细化，来实现你需要的功能。我们在
11、编写代码的时候，一定要注意，只能有一个 true 从 profile 文件中返回，否则的话程序只会识别第一个返回的 true，其他的将不会被识别或者被忽略。这时我们应用程序会被设定在当前的配置文件下，并且可以被随时查看。如果检测到我们当前的配置文件，定义了额外的 models，views，controllers 或者stores，这些都会被自动加载的。但是名字可不是随便写的，这些都是有一定关联的，看下面的例子：views: GroupAdmin will load app/view/tablet/GroupAdmin.jscontrollers: Groups will load app/co
12、ntroller/tablet/Groups.jsmodels: MyApp.model.Group will load app/model/Group.js如果没有完整的名字的话，该文件必须存放在相应目录下的 tablet 子目录下，例如所有的视图文件都必须存放在 app/view/tablet 目录下，但是如果指定了完整的路径的话，只要该文件存在于该路径下就 OK 了。大多数情况下，我们只会在 profile 中定义一些额外的视图或者控制器，共享我们应用程序的数据。Launch Process我们可以为每一个应用程序定义一个 launch 函数，负责应用程序的加载，同时这里也是我们设定应用
13、程序启动逻辑，创建主视图的最好位置。除了在该位置之外，我们还有两个地方可以设定我们程序的启动逻辑。首先是每一个控制器中，我们可以定义一个 init 函数，该函数会在 launch 函数之前被调用。另一个便是，如果我们使用了设备配置文件，那么每一个 profile 中都能定义 launch 函数，该函数会在控制器的 init 之后，launch 之前被调用。例如我们为设备定义了不同的 profile 文件，phone 和 tablet，并在一个平板电脑中运行我们的应用程序，那么启动顺序如下：1.控制器的 init 函数被调用。2.Profile 中的 launch 函数会被调用。3.应用程序的
14、launch 函数会被调用。4.控制器中的 launch 函数会被调用。当我们使用 Profile 文件的时候，通常会把启动的逻辑顺序放在 Profile 的 launch 中，因为我们会根据不同设备，建立不同的视图启动顺序。Routing and History SupportSencha Touch 中有完整的路径和历史的支持。一些 SDK 的应用程序，例如 Kitchen Sink，就使用了历史支持，可以轻松的使用 back 按钮在视图中进行切换、导航，这个在Android 设备上将更有用。随着 Sencha Touch 版本的不断完善，这些功能能将得到完善和优化，更多的例子，你可以参照 Kitchen Sink 来学习。
