我们已经考虑过我们程序要使用的模型，同样我们也要考虑我们的存储。

分析你需要的各种存储是比较容易的。有一个好的策略，就是所存储的数据都绑定在页面上
的某些组件。在我们的案例中，我们需要一个展示用户最喜欢的电台列表，一个显示最近播
放歌曲的滚动面板和可以展示搜索结果的一个搜索框。这些界面组件都需要一些数据绑定。

控制器

Controllers

通过控制器，你可以有很多方式来分发程序的职责。我们开始考虑我们案例中所需的控制器
吧。

这里有两个基本控制器

——SongController 和 StationController。Ext JS 4 允许你在一个控制

器里面同时控制多个视图。

StationController 将创建电台，同时加载用户喜爱电台到电台列

表视图中。

SongController 将负责管理歌曲信息视图和最近播放歌曲的存储，还有用户的操

作，包括暂停、下一首、喜欢等。控制器可以相互通信，通过触发和监听事件。当然我们可以
创建额外的控制器，例如管理回放的控制器，搜索电台的控制器。我想我们已经找到一个好
的方式来分担程序的各个职能。

动手前要多思考

在写

code 之前规划好程序结构体系是很重要的，我希望这次有关这些重要性的分享会帮助

到您。我觉得关于上面这个应用程序的详细讨论会帮助你构建更加灵活和易维护的程序结构。

在前一篇

Ext JS 架构的文章中，我们展开讨论了如何使用 Ext JS 来设计 Pandora 风格的程

序架构。我们还看了下

MVC 架构和如何将它应用在相关的复杂界面的应用程序上，而且这

些应用程序具有多个视图和模型。在本文中，我们开始实现应用程序，然后展开讨论如何设
计和编写控制器和模型。我们先从

Ext.application 方法和 Viewport 类开始吧.

定义我们的应用
在

Ext JS 3 中，Ext.onReady 方法是程序的入口，然后程序员要自己设计 app 的架构。在  Ext 

JS 4 中，我们有一个介绍个的类似 MVC 的模式，这个模式能帮助你按照最佳实践来创建
你的

app。

使用新的

MVC 框架时，你需要使用 Ext.application 方法作为 app 的入口。这个方法会创建

一个

 Ext.app.Application  实例，然后在页面解析完后触发  lauch  方法。这样替代了使用

Ext.onReady 来增加一些新功能， 例如自动创建一个 viewport 和设置命名空间。

app/Application.js
Ext.application({
    name: 'Panda',