从零开始学习Sencha Touch MVC应用之三

正如本文标题所述的主题我们将继续构建我们在前面已经构建的Sencha Touch MVC app，下面我们将开始进行创建一个控制器（controller）和两个视图，然后学习如何运用它们。

首先让我们来添加一些目录来修改现有的工程目录结构：

 

创建一个控制器：

在app/controllers目录下创建一个HomeController.js文件，然后在里面增加下面的内容：

Ext.regController('Home', {

         // index action

         index: ()

         {

                 Ext.Msg.alert('Test', "Home's index action was called!");

         },

});

我们通过在应用服务器中注册的方式创建一个控制器Ext.regController，这个服务器附带两个参数：控制器的名称和配置的对象，在配置的对象中我们将加入所需的常规属性和s/actions。

一个控制器的action是一个被称为一个自动基于一个路由的功能调用，一个路由器对于controller/action对来说是一个识别器，看上去类似于一个url：如home/index, home/contact 等。

注意：当你增加常规属性或者功能，你应当在其末尾添加一个逗号“，”以避免你在后续再增加其他功能和属性时出现错误。

另外注意：你应当一直保持浏览器的控制台打开，以便观察出现的错误。

缺省的路由(controller/action pair)

每一个senchaTouch启动时有一个缺省的路由被加载，在你开始使用路由之前你需要定义路由的结构。

在App目录下，创建一个routes.js文件，然后添加下面的内容：

Ext.Router.draw((map) {

         map.connect(':controller/:action');

});

在上面的代码中，路由将由两部分构成：控制器和action，被一个前向斜线分割，关于更多的路由资料，请参阅相关文档（documentation.）

现在我们来设置我们应用中的缺省设置的路由

打开App.js文件，然后设置fefaultUrl属性指向到Home/index路由，如下所示：

Ext.regApplication({

         name: 'App',

         defaultUrl: 'Home/index',

         launch: ()

         {

         },

});

在测试我们的应用之前，我们需要把创建的文件包含到index.html文件中：

<!-- Sencha Touch work -->

<link rel="stylesheet" type="text/css" href="lib/sencha-touch-1.1.0/sencha-touch.css" />

< type="text/java" src="lib/sencha-touch-1.1.0/sencha-touch.js"></>

< type="text/java" src="/app/app.js"></>

< type="text/java" src="/app/routes.js"></>

<!-- CONTROLLERS -->

< src="/app/controllers/HomeController.js" type="text/java"></>

<!-- VIEWS -->

注意：当你将开始建立更多的控制器、视图等的时候，有一种可能就是遗忘此步骤，并且很奇怪程序为啥不按设想和期望的进行运行显示，所以，千万不要忘记把你的文件包含到index.html中。