ExtJs4.0 MVC模式动态加载

最新推荐文章于 2020-10-28 22:40:58 发布
最新推荐文章于 2020-10-28 22:40:58 发布
阅读量2.2k 收藏 6
点赞数 2
分类专栏： Extjs4 文章标签： Extjs4.0 动态加载 控制器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xq5236870/article/details/8569243
版权

刚刚进公司，经理要我学习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 ==EPF
	autoCreateViewport: 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个可折叠的panel
				Ext.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

xq5236870
关注
专栏目录
Extjs 4.2.x MVC 动态加载 controller demo
11-09
demo描述： 1. 页面主框架是左是一个tree，右边是一个tablepanel 2. 左边的树是加载主页面的时候动态生成 3. 点击左边的树的节点动态加载controller生成一个table 注：需要自己导入Extjs 4.2.x 的文件，该demo是用Extjs 4.2.1 写的
Extjs4.0 mvc模式开发
08-25
在本工程中，我们将深入探讨ExtJS 4.0的MVC模式，以及如何通过controller、view、model和store来构建应用。 **1. MVC模式** MVC模式是一种软件设计模式，将应用程序分为三个主要组件：模型（Model）、视图（View）...
ExtJs4 MVC 提高加载速度 动态加载Controller
weixin_30338461的博客
04-01 121
公司项目使用ExtJs4 MVC搭建的页面 由于系统庞大导致首次加载页面时间过长，公司要求优化，经过一段时间的研究实现ExtJs4 MVC 根据要求动态加载所需组件的js文件，也就是动态加载相应的Controller文件，其他文件会自动引用。 以下列出实现的Demo关键代码和效果。（不对MVC整体框架进行详细介绍） 建立测试Demo目录 程序入口： 1 Ext.Loader....
Extjs4.1.x 框架搭建 采用Application动态按需加载MVC各模块
weixin_33826609的博客
11-13 97
我们知道Extjs4之后提出了MVC模块开发，将以前肥厚的js文件拆分成小的js模块[model\view\controller\store\form\data等]，通过controller拼接黏合，提高了js代码的重用性，可阅读性，更加适合团队的开发。 js采用mvc后必定会带来一个问题，如何高效的加载各个js小文件？ 官方的例子是统一采用了一个Ext.Application入口： E...
extjs4动态加载css文件
此间少年的专栏
06-26 455
     extjs4一个比较好的地方就是所有的文件都能动态的生成，比如通过requires可以动态的加载js文件，但是有些加载的控件同样需要加载css文件。extjs4同样也给我们提供了方法： Ext.util.CSS.swapStyleSheet('文件id', 'css文件路径');// 动态加载css文件   ...
ext mvc 动态加载
jing的专栏
11-15 1573
ext是重型框架，在做项目的时候，我们经常面临性能问题，最明显的就是加载缓慢！由于项目亲身体会，我开始研究mvc，也网上搜集过许多资料，包括ext官网提供的资料http://dev.sencha.com/deploy/ext-4.0.7-gpl/docs/index.html#!/guide/application_architecture，但是讲解的都不是我需要的，下面是我自己总结的，希望能帮助
Extjs4.0+MVC模式+存动态加载
02-04
在这个主题中，我们将深入探讨如何在ExtJS 4.0中结合MVC模式实现动态加载功能。 **MVC模式** MVC模式是一种软件设计模式，它将应用程序分为三个主要部分：模型（Model）、视图（View）和控制器（Controller）。在...
ExtJs4.0 mvc 模式
08-25
在本实例中，我们将深入探讨ExtJS 4.0中的MVC模式及其组成部分。 1. **Model（模型）**： - Model是数据存储的抽象，它封装了数据和与数据相关的操作。在ExtJS 4.0中，你可以定义模型类来描述数据结构，包括字段...
Extjs4.0MVC动态加载controler,完美破解Demo
11-15
extjs4.0中，不想一次性加载所有...extjs4.0好像设计上是一个应用对应一个application，所以原先想通过动态加载多个application来实现上面的需求。但是那样会有其问题出现，即使解决，好像也不是很好，所以改用这种方式
Extjs 4.0 MVC分页实例
12-07
在这个MVC（Model-View-Controller）分页实例中，我们将探讨如何利用ExtJS 4.0的MVC架构来实现数据的分页展示。MVC模式是软件工程中的一个设计模式，它将应用程序分为三个主要部分：模型（Model）处理数据，视图...
extjs实现动态树加载菜单
10-12
extjs实现动态树加载菜单
extjs4 mvc 动态加载controller
pingguowang的专栏
03-18 487
支持一个菜单加载多个controller，多个controller之间用逗号隔开。
extjs4 MVC 多控制器 动态加载
overjava的专栏
03-06 1488
当点击菜单时在主控制器上添加子控制器!,Ext.define('MyAPP.controller.MainController',{ ...   init:function()   {     this.control({      'menulink':      {         click:this.populateCenterPanel      }     });
关于实现Extjs动态加载类的方式实现
晨港飞燕的专栏
05-26 1154
Extjs4以前的版本没有动态加载类的方式，这样开发程序的时候加载很多的js会导致加载变慢，由于本人一直使用extjs3的版本进行开发，于是简单实现了一个动态加载类的管理器，使用方式与extjs4的方式有些类似，在每一个类中需要使用其他类的时候像java一样先improt再使用。先看使用方式： Java代码   Ext.setPath("ThinkOA", "app");//将
python教程推荐-入门python有什么好的书籍推荐？
q6q6q的专栏
10-28 143
Python 越来越火爆，最近自己也在学习。整理下一些 Python 资料，和练手的项目。希望对你学习 Python 有所帮助。如果大家想要文中 10G Python 编程视频，点击下面的卡片即可免费领取！1、入门阶段1 Python 官网https://docs.python.org/2/tutorial/​docs.python.orgPython 官方文档，永远是最好的教程。当然需要你一定的...
Extjs4 动态加载(Ext.Loader)
ITNoobie的博客
06-25 898
关于extjs4的动态加载Ext.loader，查到两篇文章，有一些不同的地方，留下备用。 一、 项目文件路径图   Js代码   Ext.Loader.setConfig({      enabled: true,      paths : {//'类名前缀':'所在路径'         'App.ux' : 'lib'
Extjs如何动态加载Extjs脚本
fanpeii的专栏
12-19 6535
这样做可以省去不少空间流量。需要的时候才会下载对应的extjs脚本 前提：我们设定我们当前的工作目录名称为code.主文件放在其中，code文件夹下有个子文件夹叫ux，用于放插件。 进入正文。 code文件夹 首先 主页面 index.html click me
ExtJs 按需动态加载（多app模式）
Mr__XiaoBai的专栏
01-10 3858
主要介绍ExtJs动态加载的解决办法，主要提到了两种解决方法，另外解决在4.1版本中事件监听失效的问题。
Extjs 4 如何动态加载 Controller
anw6199918的博客
05-23 183
Ext.application.prototype.addController = function (name) { var me = this; var controller = AM.getApplication().getController(name); if (!controller) ...
EXTJS4.0 MVC模式开发详解
开发者将通过这个笔记学习如何使用EXTJS4.0的MVC模式来开发一个名为SMS（员工管理系统）的项目。 首先，笔记介绍了项目的基本环境设置。项目包含以下几个关键部分： 1. **Data**: 存放用于管理系统的所有数据库...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值