资源描述：
《extjs4.0_mvc实例》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。
1、extjsmvc架构，有别于其他的MVC架构，extjs有自己的定义Model:一个field以及他的data的集合。Modles知道如何持久化自己一般使用Stores来表示数据以用于grids等componentView:一种component的类型,grids,trees以及panels等Controller:用来放使得app工作的代码，例如renderviews,instantiatingModels或者其他应用逻辑extjs所有的MVC程序都是用Application类的实例开始的。里面包含了这个应用的全局变量，如应用名，同时还包含了应用所需要的mod
2、els,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:'Listofuserswillgohere'}]});}});这里我们定义了一个应用名，系统会自动增
3、加这样一个namespace，此外，定义了相对的路径app.还告诉系统我们要用到Users这个controller.最终我们用launch定义了一个viewprot.一般来说，一个系统会有多个controller，一般是一个Model对用一个controller.定义个controller：controller是一个中介，主要是监听事件，特别是来自view的时间，以决定我们的系统如何继续运行。Ext.define('AM.controller.Users',{extend:'Ext.app.Controller',init:function(){console
4、.log('InitializedUsers!ThishappensbeforetheApplicationlaunchfunctioniscalled');}});注意，contorller是在上述的application实例中定义和调用。这里的init函数会在launch之前调用。然后，我们完善init函数。在init函数里面这样写Ext.define('AM.controller.Users',{extend:'Ext.app.Controller',init:function(){this.control({'viewport>panel':{rend
5、er:this.onPanelRendered}});},onPanelRendered:function(){console.log('Thepanelwasrendered');}});这里使用了一个ComponentQuery来，获得compontent，简单的说这个这里使用了一个ComponentQuery就是使用一种类似CSS代码的方法选择component。这里的意思是选择所有是viewport的孩子panel的component.都调用onPanelRendered这个函数下面我们定义view首先定义个List用来展示数据Ext.define('
6、AM.view.user.List',{extend:'Ext.grid.Panel',alias:'widget.userlist',title:'AllUsers',initComponent:function(){this.store={fields:['name','email'],data:[{name:'Ed',email:'ed@sencha.com'},{name:'Tommy',email:'tommy@sencha.com'}]};this.columns=[{header:'Name',dataIndex:'name',flex:1},{
7、header:'Email',dataIndex:'email',flex:1}];this.callParent(arguments);}});这个view是一个最普通的component。一个gridpanel的扩展。这里的alias的作用就是让我们可以使用xtype函数来创建Item。然后就是使用这个list首先实现修改user.js里的controller文件，来增加view的支持Ext.define('AM.controller.Users',{extend:'Ext.app.Controller',views:['user.List'],init:
8、...onPanelRendered:
