这篇文章写的有些晚,本打算5.1写2篇,遇到很多需要办的事,实在抱歉。
之前一直在自己的笔记本上开发,本子用的太老了,天气稍微一热键盘都烫手。5.1假期,组装了个台式机,现在用着舒服多了。
昨天转移这个项目时,遇到了个问题,就是EF框架生成的edmx报错,肯定是没有安装SQLite驱动,于是到官方找了个64位的系统,蛋疼的事情发生了,不能安装。今天报着试一试的心里,装了个32位,竟然通过的,多了份无奈。
ExtJS给我的感觉是开发效率不高,从代码编写、调试都能反应出来,不过在ExtJS4.0引入MVC模式以后好了很多,因为很多代码都是分开写的,比如在“用户管理”模块中,可能涉及到操作:显示用户列表、添加用户和修改用户,在4.0以前只能把这三个视图写在一个页面中:用户列表一般是一个grid;添加和修改视图一般是window,里面嵌个form。这样,同一个页面中含有大量的代码,在开发和维护时,找到一行代码并不那么方便。但在ExtJS4.0以后,列表、添加、修改就可以分别放到三个js中,在控制器中就可以轻易的处理这些视图。
由于ExtJS与后台数据的访问都是通过ajax异步访问的,也就是无刷新的交互,所以,ExtJS仅需要一个“入口”处,这个入口文件就是 app.js,app中定义了整个项目所需要的controller,每个控制器负责自己的业务逻辑处理,包括交互界面(视图)。
下面转入正题,这篇准备讲些ExtJS基础的东西,然后发布个简单的 ExtJS DEMO。
1 ExtJS4.x中使用MVC开发的目录结构
先看下我的目录结构:
如果你用过其他的MVC框架,再看ExtJS的mvc并不难。上图中ExtJS目录处于Web项目的根目;/ExtJS/4.1 中存放的是extjs框架文件;Manage是后台管理的命名空间,相当于ASP.NET MVC中的一个Area,其中有一个目录app,存放所有的js脚本,app.js可以认为是入口引导文件。app目录中的结构如下:
controller:存放所有控制器,和其他的mvc框架类似;
model:存放model类文件,MVC中的Model本身是一种充血模型,但我个人的理解,在ExtJS中是贫血的,简单的说就是仅有属性,没有方法,可以这么理解;
view:就是存放视图的目录,与以前的版本相比,不同的用户界面可以定义多个视图,可以在控制器中很容易的调用这些视图;
store:存储器,extjs提供了很多类型的store用于处理array、json、xml等格式的数据;
proxy:代理是store与数据库之间的“通道”,store要想操作数据必须通过proxy,针对不同的数据源,extjs提供了多种代理,并向store提供CRUD操作的接口;
utility:常用类的封装。
如果要和.NET中的对象做个对比的话,我认为Proxy类似于DbConnection,用于操作数据,Store类似于DataSet,用于存储数据,而model就是DataRow了。
2 简单的DEMO
先把这个DEMO的图给贴出来:
这个DEMO中涉及到两个数据:左边的菜单和右边的列表,我分别定义为Menu和Role。由于js脚本文件太多,我就不一一列举,仅把主要的几个js说明下:
2.1 app/app.js
Ext.config = {
root : '/ExtJS/Manage/'
};
Ext.application({
name: 'Manage',
appFolder: Ext.config.root + 'app',//定义模块位置
controllers: [//声明用到的两个控制器,如果有很多,需要逐一列出
'Menu',
'Role'
],
requires: [
'Manage.utility.Format',//必须的类文件,这里我自己封装的
'Manage.utility.Const'
],
autoCreateViewport: true//自动创建Viewport布局,需要在View目录中存在才行
});
2.2 app/controller/menu.js
这里我只举个menu的例子,role的可以对照看下代码:
Ext.define('Manage.controller.Menu', {
extend: 'Ext.app.Controller',//从控制器基类继承
stores: ['Menu'],//用到的Store对象
views: ['menu.Tree'],//用到的视图对象
init: function() {//初始化事件
this.control({
'menuTree': {//捕获menuTree视图中的对象事件
itemclick: this.selectItem//捕获元素点击事件
}
});
},
selectItem: function(){
console.log('click item');//用chrome浏览器时,打开console能看到输出
}
});
2.3 app/store/menu.js
这里我把proxy写在了一起,下载代码后能看到role的处理,我是分开写的。
Ext.define('Manage.store.Menu', {
extend: 'Ext.data.TreeStore',//从TreeStore继承,因为左侧是Tree对象
autoLoad : true,
proxy: {//配置代理
type: 'ajax',
api: {
read: Ext.config.root + 'data/menus.js'
},
reader: {
type: 'json',
root: 'childrens'
}
},
sorters: [{
property: 'leaf',
direction: 'ASC'
}],
root: {
nodeType: 'async',
text: 'Ext JS',
expanded: true
}
});
2.4 app/view/menu/tree.js
Ext.define('Manage.view.menu.Tree', {
extend: 'Ext.tree.Panel',
alias : 'widget.menuTree',//别名,控制器中捕获事件就是通过这个名字查找到的
header : false,
border : 0,
store: 'Menu',
rootVisible: false
});
2.5 app/view/Viewport.js
这个文件就是引导文件(app.js)中配置自动创建Viewport调用的。
Ext.define('Manage.view.Viewport', {
extend: 'Ext.container.Viewport',
requires: [
'Manage.view.Head',
'Manage.view.Menu',
'Manage.view.Foot',
'Manage.view.Body'
],
layout: 'border',
items: [{
region: 'north',
height: 45,
xtype: 'head'
},{
region: 'west',
width: 225,
xtype: 'menu'
},{
region: 'south',
height: 25,
xtype: 'foot'
},{
region: 'center',
xtype: 'body'
}]
});
其他的文件请看下源代码,明白一个模块的,其他的都类似,如果还不清楚可以看本人其他的文章,链接: http://blog.csdn.net/xz2001/article/details/8456578
本篇DEMO地址:http://download.csdn.net/detail/xz2001/5381233
注:仅是ExtJS部分DEMO