正如本文标题所述的主题我们将继续构建我们在前面已经构建的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中。