ExtJs4.0 MVC模式动态加载

来源：互联网发布：最省电的软件下载编辑：程序博客网时间：2024/06/05 23:51

刚刚进公司，经理要我学习ExtJs，一直看不是我一贯的作风，所以就找点例子自己做做。

用了几个星期的度娘，google，终于还是有点收获的。自己用ExtJs4.0基于MVC模式做了一个小小的列子。

列子里面的数据并没有和数据库交互，只是在后台模拟了数据。编程工具用的是EasyEclipse，废话不多说。直接进正题。

都说无图无真相，先来几张图

这个就是基本的文件包名，基本按照MVC模式：

文件夹controller（控制器）看见名字就知道，是拿来控制的。但是控制什么的呢？我的理解就是处理用户的一些响应

文件夹model（模型）与文件夹store（存储）这2个是结合在一起的，是用来管理数据的。个人理解model里面放的就是实体类

store里面有model属性来指明对应的实体类。然后通过ajax与后台交互返回json格式的数据，从而存储的一个数据对象。

文件夹view（视图）这就是一个显示数据的。

接着来一张我们最后要做成的样子图片

大概的排版就是

上面一个头head.js

中间分成2块，左边一个菜单导航menu.js，右边一个视图显示view.js

下面一个脚foot.js。

如图所示：导航里面是一个tree.对于tree来说我们就要用到所谓的动态加载了。tree下面又有子菜单。基于全动态加载。子菜单我也是用的动态加载

即你点击上图的合同管理然后才会加载合同管理的子菜单，点击合同管理的子菜单在动态加载子菜单对应的面板，然后把对应的面板加到view视图显示上。

当然我们用的也是动态加载。来张图就知道了。

下图是我刚刚启动项目时浏览器所加载的JS

由图不难看出来很多的js都没有加载我这个项目有17个JS，但是加载的Js只有8个。导进来的js没有算在里面。

接来下上代码（注意好路径）：

HTML页面

<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><link rel="stylesheet" type="text/css" href="ext-4.0/resources/css/ext-all.css"/><script type="text/javascript" src="ext-4.0/ext-all-debug.js"></script><script type="text/javascript" src="app.js"></script><title>E-Platform</title></head><body></body></html>

app.js

Ext.Loader.setConfig({//动态加载enabled:true});Ext.application({name:'EPF',//这个name的意思是将  工程名/app ==EPFautoCreateViewport: true,//设置这个意思就是由我自己创建Viewport.js,如果设置为false则系统会帮你创建,具体啥子可以百度appFolder:'app',//这个就是系统扫描app文件夹下的js文件controllers:['Menus'//控制器],/* * 下面的就是关键了,动态加载控制器.我也是找度娘，在网上查到的 */launch :function(){this.controllers.addListener('add',this.newControllerAdded,this);//帮控制器增加一个事件},newControllerAdded:function(idx, ctrlr, token){    ctrlr.init();    //控制器初始化  }});

Viewport.js

Ext.define('EPF.view.Viewport',{//注意名字extend:'Ext.Viewport',layout: 'fit',hideBorders: true,requires:['EPF.view.Head','EPF.view.Menu','EPF.view.View'],initComponent : function(){Ext.apply(this,{items:[{id:'desk',layout: 'border',items:[Ext.create('EPF.view.Head'),Ext.create('EPF.view.Menu'),Ext.create('EPF.view.View')]}]});this.callParent(arguments);//这个里面没什么好解释的就最后这一个。具体啥意思不记得了。反正所有跟视图有关的都加上他就可以了}})

Head.js

Ext.define('EPF.view.Head',{extend:'Ext.Component',initComponent:function(){Ext.applyIf(this,{xtype:'box',cls:'header',region:'north',html:'<h1>  放张图片</h1>',height: 30});this.callParent(arguments);}})

View.js

Ext.define('EPF.view.View',{    extend: 'Ext.tab.Panel',    initComponent : function(){        Ext.apply(this,{            id: 'content-panel',            //id很重要，后面点击子菜单添加panel要用到            region: 'center',            //这个center也很重要，因为我的布局是border，所以一定要指定center。具体查API            defaults: {               autoScroll:true,               bodyPadding: 0            },            activeTab: 0,            border: false,   items: [{              id: 'HomePage',              title: '首页',              iconCls:'home',              layout: 'fit'            }]        });        this.callParent(arguments);    }})

Menu.js

Ext.define('EPF.view.Menu',{extend:'Ext.panel.Panel',layout:'accordion',requires:['EPF.view.menus.PersonTree','EPF.view.menus.FinanceTree'],initComponent : function(){Ext.apply(this,{id:'menu-panel',title:'导航界面',iconCls:'icon-menu',margins:'0 0 -1 1',region :'west',border:false,enableDD:false,split:true,width:212,minSize:130,maxSize:300,rootVisible:false,containerScroll : true,            collapsible : true,//可折叠            autoScroll: false,items:[//下面下个就是我创建的2个可折叠的panelExt.create('EPF.view.menus.FinanceTree'),Ext.create('EPF.view.menus.PersonTree')]});this.callParent(arguments);}})

PersonTree.js

Ext.define('EPF.view.menus.PersonTree',{extend:'Ext.tree.Panel',//alias 别名alias:'widget.persontreemenu',initComponent: function(){Ext.apply(this,{title: '人事管理',        iconCls:'icon-menu',margins:'0 0 -1 1',border:false,enableDD:false,split:true,width:212,minSize:130,maxSize:300,rootVisible:false,containerScroll : true,            collapsible : true,            autoScroll: false,            //store数据来源            store:Ext.create('EPF.store.PersonTreeMenus')});this.callParent(arguments);}})

FinanceTree.js

Ext.define('EPF.view.menus.FinanceTree',{extend:'Ext.tree.Panel',alias:'widget.financetreemenu',initComponent: function(){Ext.apply(this,{title: '财务管理',        iconCls:'icon-menu',margins:'0 0 -1 1',border:false,enableDD:false,split:true,width:212,minSize:130,maxSize:300,rootVisible:false,containerScroll : true,            collapsible : true,            autoScroll: false,            store:Ext.create('EPF.store.FinanceTreeMenus')});this.callParent(arguments);}})

Menus.js

Ext.define('EPF.controller.Menus',{extend:'Ext.app.Controller',refs:[//别名的用处通过别名知道对应的视图，视图对应方法        {ref: 'persontreemenu',selector: 'persontreemenu'},        {ref: 'financetreemenu',selector:'financetreemenu'}    ],init: function(){ this.control({            'persontreemenu': {            //鼠标点击调用方法                itemmousedown: this.loadMenu            },            'financetreemenu': {                itemmousedown: this.loadMenu            }        })},loadMenu:function(selModel, record){if(record.get('leaf')){//判断是否存在子节点，如果没有子节点就走下面//有子节点就是把子节点显示var panel = Ext.getCmp(record.get('id'));//通过id得到panel，判断panel有没有打开            if(!panel){            //不存在            var path;            Ext.Ajax.request({            //发送ajax请求后台传一个id给后台。表示我现在点击的是哪一个叶子节点            waitMsg: '努力加载中...',    params:{    //参数id            id : record.get('id')            },           async : false,//关键只有加这个才可以把ajax返回值赋给变量，外面才可以使用。    url:'PanelToView',    success : function(response){    path = Ext.JSON.decode(response.responseText)[0].text;    //把返回值赋给path我这后台模拟传出来的是EPF.view.panel.PersonalImformation    }            });            //下面重点，动态加载控制器            //1得到控制器,这个控制器对应的哪个panel            this.getController('PersonalImformation');            //创建一个模板panel设置标题，还有可关闭            var modelPanel ={            title:record.get('text'),            closable:true            };            //下面这个是百度来的，api中说过Ext.create这个方法也是一个别名创建            //大家想想,既然Ext.create都是动态来实现的，我们只要了解他的实现原理，就可以依葫芦画瓢            //下面的意思就是我指定了一个path，还有一个模板，动态创建了一个panel    panel = Ext.create(path,modelPanel);//调用openTab方法                this.openTab(panel,record.get('id'));            }else{            //如果存在，让panel得到焦点                var main = Ext.getCmp("content-panel");                main.setActiveTab(panel);            }}},    openTab : function (panel,id){        var o = (typeof panel == "string" ? panel : id || panel.id);        var main = Ext.getCmp("content-panel");        var tab = main.getComponent(o);        if (tab) {            main.setActiveTab(tab);        } else if(typeof panel!="string"){        panel.id = o;            tab = main.add(panel);            main.setActiveTab(tab);        }    }});

我这个子节点打开的里面是一个分页的table，在table上又加了一个双击事件，就是上面代码中新加载的控制器

PersonlInformation.js

Ext.define('EPF.view.panel.PersonalImformation',{extend:'Ext.grid.Panel',alias:'widget.personalimformation',requires :[        'Ext.toolbar.Paging'],initComponent: function(){var store = Ext.create('EPF.store.PerImformation');Ext.apply(this,{        store: store,        disableSelection: true,        loadMask: true,        columns:[        {text:'姓名',width:120,dataIndex:'name',sortable:true},            {text:'性别',width:120,dataIndex:'sex',sortable:true},             {text:'年龄',width:120,dataIndex:'age',sortable:true}        ],        bbar: Ext.create('Ext.PagingToolbar', {            store: store,            displayInfo: true,            displayMsg: 'Displaying topics {0} - {1} of {2}',            emptyMsg: "No topics to display"            })});this.callParent(arguments);}})

大概代码就这么点.其他的太多了.稍后我会直接上传

代码下载地址(赚点可怜分)http://download.csdn.net/detail/xq5236870/5052758