刚刚进公司,经理要我学习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