Extjs4开发笔记（一）——准备工作
2011-06-28 来源：mhzg 作者：mhzg (共2 条评论)
使用extjs4 mvc+asp来实现员工管理系统，系统会使用大量的extjs4组件及插件，期待着这个系统完成。 本文内容已经重新更新，旧版请查看锚
/a/20116/20116281100279-old.html。
重写原因：由于开始准备的时候，就是按照传统开发去做的，写了一部分之后，有网友和同事提出：“为什么不用MVC模式”呢？这样的问题让我对目前传统开发的心发生了一些细微变法，对啊，为什么不用MVC模式呢？我征求了一下同事及热心网友的意见，都同意使用MVC模式开发。从而，我删掉了原来所有目录，重新按照MVC模式去组织目录结构，很快的，目录结构准备好了。
那。。我们重新来过，使用EXTJS4.0的MVC模式，开发这套员工管理系统。给个简称吧。SMS（你懂得。呵呵！）。
一、建立环境：
Data：数据库文件夹，里面放着管理系统用的数据库文件。数据库目前只有三张表。分别是： Menu：菜单项
user：员工注册信息
userinfo：员工个人资料信息
Images：图片目录，一些自定义的图片文件
Include：服务端文件目录，里面包含ASP所用到的Conn.asp、Function.asp等文件App：整个SMS所
浮油回收机用到的自定义JS文件，里面有一个controller文件夹，一个view 文件夹。controller文件夹放置主代码，view文件夹放置各组件。这几个文件夹中的内容会在第二章进行介绍。 Extjs4：此目录放置Extjs4的库文件。
Server：服务端目录，里面包含ASP服务端获取数据的各种.ASP文件。目前里面建立了一个叫MenuLoader.asp的文件，从名字上来看，这个文件是加载菜单使用。 OK，今天就介绍到这里，明天，我们会从头开始发开基于Extjs4 MVC模式的应用。
Extjs4开发笔记(二)——框架的搭建
2011-06-29 来源：mhzg 作者：mhzg (共11 条评论)
头部、菜单、内容区及底部则完全分离成4个JS文件，我们将先实现这几个文件的基础功能，由于使用的是Extjs4，所以我们一定要使用Extjs4 动态加载功能。来动态加载这些文件。 本文内容已经重新更新，旧版请查看：
/a/20116/201162913210280-old.html
由于最近老出差，所以代码无法及时更新。导致近一周都没有更新。
水管堵头
称重装置废话不多说了，上篇文章建立了比较基础的文件。今天开始搭建大体的框架，由于Extjs4在组件建立方面有了很大的改变，所以第一次建立的框架页面还是费了比较长的时间。本章内容增加了一些图片及CSS文件，目的是为了美化整个界面。增加的CSS文件：注意事项：layout、region的使用，如果没有看API及相关文档的话，那么面对错误对话框的时候，还不知道是怎么回事。
本文将main.js放到了/app/controller文件夹下，这将是整个项目的主体文件。
而头部、菜单、内容区及底部则完全分离成4个JS文件，我们将先实现这几个文件的基础功能，之后我们会慢慢完善这些组件。而整个页面的填充，也使用一个JS文件来完成。也许有人会问，这么多文件，是不是要都在index.html中引入啊。这样想的话，就错了哦。因为我们使用的是Extjs4，所以我们一定要使用Extjs4 动态加载功能。
先来看下自定义CSS（sytle.css）：
1.#header { background: #7F99BE url(/images/layout-browser-hd-bg.gif) repeat-x center;
}
2.#header h1 {font-size: 16px;color: #fff;padding: 3px 10px; font-family:"微软雅黑","
黑体"}
3.
7..home{background-image: url(../images/home.gif) !important; line-height:30px;}
8..icon-menu{background-image: url(../images/menuPanel/sys.gif) !important;}
图片文件夹就不放上来了。从以前的项目中拷贝了一些比较靠谱的图片，大家完全可以自己去下载一些ICON图标文件而为己所用。
搭建的框架是经典的EXTJS布局模式，如图所示：
首先，我们建立index.html和app.js，index.html代码为：
1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""/TR
/xhtml1/DTD/xhtml1-transitional.dtd">
2.<html xmlns="www.w
3.<head>
4.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5.<title>员工管理系统</title>
6.<link rel="stylesheet" type="text/css" href="extjs4/resources/css/ext-all.css" />
7.<!--引入自定义CSS-->
8.<link rel="stylesheet" type="text/css" href="extjs4/resources/style.css" />
9.<script type="text/javascript" src="extjs4/ext-all-debug.js"></script>
10.<script type="text/javascript" src="app.js"></script>
11.</head>
12.
13.<body>
14.</body>
15.</html>
App.js：
1.Ext.Loader.setConfig({enabled: true});
2.Ext.application({
3. name: 'SMS',
4. appFolder: 'app',
5. controllers: [
6.'Main'
7. ]
8.});
稍做解释：
Ext.Loader.setConfig({enabled: true});//意思是开启Ext.Loader。Ext.Loader是动态加载的核心哦。。
Ext.appliction({...})；看字面意思吧，不解释。
ngd071配置中的name，我理解为是Extjs3.x、Extjs2.x中的命名空间。
appFolder，应用文件夹名字。
controllers，控制单元的名字，这里我们定义为Main。那么根据Extjs4动态加载的要求，我们需要在/app/controllers文件夹下建立Main.js文件，作为控制单元。有关Extjs4动态加载机制，请参考：/a/20117/2011721040290.html
Main.js：
1.Ext.define('ller.Main',{
2. extend: 'Ext.app.Controller',
3. init : function(){
4. }
5.})
这里的Main.js中只是定义了Main这个类，且继承了Ext.app.Controller，其余都没有写。看到这里，会有人很奇怪了，index.html中引入了app.js，而app.js只是创建了Main这个类，但Main.js什么都没有，那么页面中为什么会显示出框架页面呢？这也是最多人所疑惑的。下面我来解释下这个问题。所有的原因就在于app.js这个文件中，app.js 文件定义了Ext.application。而Ext.application中有个属性是autoCreateViewport ，这个属性是Boolean类型，如果值为true，那么Extjs4会自动加载view/Viewport.js文件，如果值为flase，那么必须要自己去创建一个View，这就是为什么app.js和Main.js文件都没有写相关代码，也会有界面出现。
整理下思路，由于Extjs4自动加载了view/Viewport.js，而Viewport.js文件包含了头部、菜单、内容区及底部这4个组件，那么我们必须先完成这4个文件的编写，同样，由于这4个文件是界面型的，我们将这4个文件都放到view文件夹下。
view文件夹下共5个JS文件，分别为：
Header.js、Menu.js、South.js、TabPanel.js及Viewport.js塑料拖把头
这5个js文件的作用，我们一一介绍。
5个js文件都包含了Ext.applyIf、callParent。由于篇幅问题，Ext.applyIf、callParent等方法，请参考Extjs4相关API。
Header.js：这个是头部，也就是深蓝底子。白字体，那块，上面写着员工管理系统。
代码为：
1.Ext.define('SMS.view.Header', {
2. extend: 'Ext.Component',
3. initComponent: function() {
4. Ext.applyIf(this, {
5. xtype: 'box',
6. cls: 'header',
7. region: 'north',
8. html: '<h1>员工管理系统</h1>',
9. height: 30
10. });
11.this.callParent(arguments);
12. }
13.});
Menu.js:
1.Ext.define('SMS.view.Menu',{
2. extend: 'Panel',
3. initComponent : function(){
4. Ext.apply(this,{
5. id: 'menu-panel',
6. title: '系统菜单',
7. iconCls:'icon-menu',
8. margins : '0 0 -1 1',
9. region:'west',
10. border : false,
11. enableDD : false,
12. split: true,
13. width : 212,
14. minSize : 130,
15. maxSize : 300,
16. rootVisible: false,
17. containerScroll : true,
18. collapsible : true,
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议