Extjs4.0_MVC实例.pdfVIP

extjs mvc 架构 ，有别于其他的MVC 架构，extjs 有自己的定义 Model : 一个field 以及 他的data 的集合。 Modles 知道如何持久化自己一般使用Stores 来表示数据以用于grids 等component View: 一种component 的类型,grids,trees 以及panels 等 Controller:用来放使得app 工作的代码，例如 render views , instantiating Models 或者其他应用逻辑 extjs 所有的MVC 程序都是用Application 类的实例开始的 。里面包了这个应用的全局变量，如应用名，同时还包了应用所需要的models,views 以 及controllers 。 此外还包了一个launch 函数，这个函数会在加载的时候自动运行。例如 Ext.application({ name: AM, appFolder: app, controllers: [ Users ], launch: function() { Ext.create(Ext.container.Viewport, { layout: fit, items: [ { xtype: panel, title: Users, html : List of users will go here } ] }); } }); 这里我们定义了一个应用名，系统会自动增加这样一个namespace ，此外，定义了相对的路径app.还告诉系统我们要用到Users 这个controller.最终我们 用launch 定义了一个viewprot. 一般来说，一个系统会有多个controller ，一般是一个Model 对用一个controller. 定义个controller ： controller 是一个中介，主要是监事件，特别是来自view 的时间，以决定我们的系统如何继续运行。 Ext.define(AM.controller.Users, { extend: Ext.app.Controller, init: function() { console.log(Initialized Users! This happens before the Application launch function is called); } }); 注意，contorller 是在上述的application 实例中定义和调用。这里的init 函数会在launch 之前调用 。然后，我们完善init 函数 。在init 函数里面这样 写 Ext.define(AM.controller.Users, { extend: Ext.app.Controller, init: function() { this.control({ viewport panel: { render: this.onPanelRendered } }); }, onPanelRendered: function() { console.log(The panel was rendered); } }); 这里使用了一个ComponentQuery 来，获得compontent ，简单的说这个这里使用了一个ComponentQuery 就是使用