概述
理解ExtJs里面的一些基本关键字的概念是使用ExtJs搭建MMVC框架的基础，在ExtJs中，我们通常遇到ExtJs的配置和启动项Ext.application()，该方法是ExtJs程序初始化的入口，里面可以配置响应的参数和Lunch方法体，常用的配置举例：PS Application里面的Controllers类型是Ext.app.Controller，View里面（Panel）Controller对应的类型是Ext.app.ViewController；
//ExtJs的入口，加载该Js之后，自动调用launch方法内容项 Ext.define('MyApp.controller.Users', { extend: 'Ext.app.Controller', init: function() { console.log('Initialized Users! 1'); } }); Ext.define('MyApp.controller.AUsers', { extend: 'Ext.app.ViewController', alias: 'controller.AUsers', onPanelRendered: function() { console.log('The panel was rendered'); } }); //ExtJs的入口，加载该Js之后，自动调用launch方法内容项 Ext.application({ name: 'MyApp', controllers: ['Users'], launch: function() { console.log('Initialized Users! 2'); Ext.create('Ext.Panel', { renderTo: Ext.getBody(), controller: 'AUsers', 200, height: 150, bodyPadding: 5, title: 'Hello World', html: 'Hello <b>World</b>...' }); } });
基本概念汇总
Ext.container.Container
任何可能包含Ext.Component组件的容器基类，对于所包含的组件的基本处理包括添加，插入和删除项目。最常用的的容器类Ext.panel.Panel，Ext.window.Window和 Ext.tab.Panel。通过Ext.container.Container自定义容器组件。两个重要的参数: layout和items，layout参数用于指定当前组件使用何种布局，items参数中包含的是当前组件中的所有子组件；同时容器控件，与Ext.container.Viewport不同之处在于Viewport可以通过百分比调整占据Body的宽高；
Ext.define('MyApp.view.main.Main',{ extend:'Ext.container.Container', xtype:'app-main', requires:['MyApp.view.user.UserGrid'], layout:{type:'center'}, items:{xtype:'app-usergrid'} });
Ext.panel.Panel和Ext.container.Viewport布局
Viewport 它的布局会占用整个 body,也应该是这样，它会随着浏览器的高度和宽度的变化而变化。
Panel 布局时需要提供一定的高度和宽度值，这个值是固定的，它不会随着浏览器的变化而变化
Ext.app.ViewController
该类是负责控制页面的组件的加载，俗称视图控制器，协调视图（view）和视图调用事件和谐工作；视图控制器是附加在一个特定页面的实例，以便于管理该视图和它的子控件，每个视图将分配一个视图实例对象，以便于单独控制该视图实例；当视图控制器指定到特殊的视图页面时候，视图里面的事件（even）和处理的方法(handler)将会自动调用ViewController对应方法；
//ViewController加载到MyView视图中，MyView中的事件和Hander自动调用ViewController的方法内容
Ext.define('MyViewController', { extend : 'Ext.app.ViewController', alias: 'controller.myview', onAddClick: function() { Ext.Msg.alert('Add', 'The Add button was clicked'); } }); Ext.define('MyView', { extend: 'Ext.Panel', controller: 'myview', items: [{ xtype: 'button', text: 'Add', handler: 'onAddClick', // calls MyViewController's onAddClick method }] }); Ext.onReady(function() { new MyView({ renderTo: Ext.getBody(), 400, height: 200 }); });
Ext.app.Controller ref说明（转）
简单来说，就是4.0建议的MVC中controller引用组件的一种方式，selector中设置组件，可以用id、classname，但推荐用ComponentQuery（“组件检索”功能，xType）来定位组件。ref中设置引用名，引用之后会按照引用名自动为该组件设置一个getter方法，如ref：List，则在controller中就可以通过getList方法获得引用的组件。。如果你引用的组件不存在，则getList方法也会生成，不会报错，但是返回的是null值。如果你引用的组件有多个，则返回第一个（具体哪个是第一个没研究），所以要注意尽量用ComponentQuery方法指向唯一的组件。实在不行再用id，不过不是很推荐，因为这个id实在引起了太多的问题。
Ext.app.Controller和Ext.app.ViewController（转）
为组件添加事件，就要用到控制器了。Extjs5提供了两种控制器：Controller和ViewController，这两种控制器都继承自BaseController。从功能上来讲，两者的大多数功能都是一致的，也就是说，在不严格区分的情况下，这两者选哪个都能用。从作用范围上讲，Controller范围比较大，属于应用级别的，ViewController范围比较小，属于界面级别的，也就是说Controller一般用于控制整个app，ViewController一般用于控制app中的某一个view。
在Extjs4中，只有Controller。Extjs4 MVC中，Application一开始时，就加载所有的Controller（有些人用了其他的方法避免了这个问题，有兴趣可以上网查下），其生命周期和我们的Application是一样的。这里就存在一些问题了，一般来讲，Application开始运行时，我们只需要加载首页的相关内容就行，其他页面由于没有显示，就无需加载了。例如我们首页是页面A，在A中点击某个按钮能跳到页面B，比较好的做法是，B页面的View和Controller我们可以在A中点击按钮之后才加载，没有必要再加载A页面的同时也加载B页面，但是前面讲了，Application开始时，就加载了所有的Controller，无论当前有没用到，都加载了，并且跟随着Application的生命周期一同存在，并且Controller里面还需要加载其控制的View，那么就相当于Application一开始，就把所有东西都加载进来了，性能和效率都是比较差的。
在Extjs5中，针对于Controller存在的问题，新增了ViewController。ViewController无需在Application开始时就加载，只有在使用了某个View时，才在View中加载其对应的ViewController，所以说ViewController是控制页面级别的。
根据前面的解释，似乎我们为导航栏添加控制器，应该使用Controller。但是，这里我还是使用ViewController。只要使用ViewController的View不销毁，那么ViewController也一样一直存在于Application中，一样能达到Controller的效果。所以，当我前面讲的都是废话吧。
为什么不用Controller呢？在官方的文档中有这么一段话“While Ext JS 5 is backwards compatible with current controllers, itintroduces a new type of controller designed to handle these challenges:Ext.app.ViewController.”，我翻译为：“Ext JS 5在向后兼容目前的控制器的同时，也引入了一个新的控制器设计来处理这些挑战（我们前面讲的Controller存在的问题）:Ext.app.ViewController”，并且我们发现，在用senchacmd5 生成的Extjs5项目结构中，并没有controller这个包，而在extjs 4的项目中，是有这个包的。所以，我认为，Controller之所以存在，是为了兼容旧版本，新版本中，我们应该使用ViewController。但是有一点需要说明的是，ViewController对Controller做了简化，有些方法Controller里有而ViewController里没有，所以不排除有些时候你只能用Controller。
Ext.app.ViewModel
该类主要负责页面显示实体模型类似于Java中VO;
Ext.app.Application
代表性的ExtJS应用程序，通常是用Ext.container.Viewport创建的经典的单页面应用程序。一个程序由一个或多个视图（View）组成。视图的行为表现由它对应的视图控制器（Ext.app.ViewController）和视图模型（Ext.app.ViewModel）管理。全局的活动是由控制器（Ext.app.Controller）来调整的，这个控制器基本上是由如下的类（或其子类）的实例来实例化的。（以下内容翻译ExtJs官网）
Ext.application({ name: 'MyApp', //将要创建的初始视图的名字。在使用经典工具包的情况下，若这个类没//有继承Ext.ViewPort，它将获得一个“视口”插件。 //在使用现代工具包的情况下，主视图（mainView）将被添加到Viewport。 mainView: 'Main.view.main.Main' });
这个实例化的过程由几个步骤组成。首先，它创建一个全局变量，叫做“MyApp”-你程序中所有的类（如它的模板，视图和控制器）将位于此命名空间下。这将会大大降低全局变量命名冲突的可能性。这个全局的MyApp会有一个getApplication的方法，用来获得当前程序的引用。
var app = MyApp.getApplication();
使用Applicatioin配置程序中的其它部分
因为一个Ext.app.Application代表了整个app，我们需要在这里面设置app的其它部分-也就是跟程序绑定在一起的模型，视图和控制器。比如说，我们有一个博客管理程序；我们或许还有用来发帖子和评论的模板和控制器，用来列出，添加及编辑帖子和评论的视图。如下是我们要在Application里面配置的所有东西。
Ext.application({ name: 'Blog', models: ['Post', 'Comment'], controllers: ['Posts', 'Comments'], launch: function() { ... } });
注意，我们并没有直接在程序里列出视图。这是因为视图是由控制器来管理的，所以保持这种依赖是明智的。程序将根据路径控制协定加载每个被声明的控制器，这些协定在程序架构导引中列出-这样的话，控制器将会位于路径app/controller/Posts.js和app/controller/Comments.js下。反过来，每个控制器仅仅只需要列出它使用的视图，它们便会自动被加载。我们的帖子控制器会被这样定义：
Ext.define('MyApp.controller.Posts', { extend: 'Ext.app.Controller', views: ['posts.List', 'posts.Edit'], //the rest of the Controller here });
因为我们在程序中配置了我们的模板和控制器，并且在控制器里设置了与之相关的视图，ExtJS将会为我们自动加载我们所有的程序文件。这就意味着，当我们添加一个新类时，我们不需要手动添加script标签到我们的html文件里。但更重要的是，这让我们能够用Sencha Cmd（Ext JS官方构建工具）创建一个我们整个程序的最小化版本。
从Ext.app.Application派生程序
通常情况下，程序不能直接从Ext.app.Application派生。当然，通过传递给Ext.application的配置参数，也可以很相像地完成你可能想在派生类中完成的功能。然而，在一些情况中，使用从Ext.app.Application中派生的类才能令人满意地共享程序的逻辑功能。
派生类会按照你的期望正常运行，然而，使用派生类仍然是Ext.application方法的主要功能。
Ext.define('MyApp.Application', { extend: 'Ext.app.Application', name: 'MyApp', ... }); Ext.application('MyApp.Application');
个人总结：
1、Ext.application方法是程序的入口，方法的参数是Ext.app.Application类型的对象，该对象有Lunch方法，当Js加载完成之后，会调用里面Lunch方法；Ext.app.Application里面可以定义ViewModel和ViewController，所有的ViewController和ViewModel都是通过App.controller全局调度，所以Ext.app.Application还可以配置好Controller等参数；
2、定义Ext.app.Application的Name值为MyApp也就默认指定的了，该应用程序集下的所有对象都必须是MyApp命名空间下的类对象，所以ViewController和ViewModel的命名空间的首单词必须以MyApp开始；