2024年6月12日发(作者：)

Extjs4开发笔记（一）——准备工作

2011-06-28 来源：mhzg 作者：mhzg (共2 条评论)

使用extjs4 mvc+asp来实现员工管理系统，系统会使用大量的extjs4组件及插件，期待着

这个系统完成。

本文内容已经重新更新，旧版请查看

/a/20116/。

重写原因：由于开始准备的时候，就是按照传统开发去做的，写了一部分之后，有网

友和同事提出：“为什么不用MVC模式”呢？这样的问题让我对目前传统开发的心发生了一

些细微变法，对啊，为什么不用MVC模式呢？我征求了一下同事及热心网友的意见，都同意

使用MVC模式开发。从而，我删掉了原来所有目录，重新按照MVC模式去组织目录结构，很

快的，目录结构准备好了。

那。。我们重新来过，使用EXTJS4.0的MVC模式，开发这套员工管理系统。给个简称

吧。SMS（你懂得。呵呵！）。

一、建立环境：

Data：数据库文件夹，里面放着管理系统用的数据库文件。数据库目前只有三张表。

分别是：

Menu：菜单项

user：员工注册信息

userinfo：员工个人资料信息

Images：图片目录，一些自定义的图片文件

Include：服务端文件目录，里面包含ASP所用到的、等文件

App：整个SMS所用到的自定义JS文件，里面有一个controller文件夹，一个view

文件夹。controller文件夹放置主代码，view文件夹放置各组件。这几个文件夹中的内容

会在第二章进行介绍。

Extjs4：此目录放置Extjs4的库文件。

Server：服务端目录，里面包含ASP服务端获取数据的各种.ASP文件。目前里面建立

了一个叫的文件，从名字上来看，这个文件是加载菜单使用。

OK，今天就介绍到这里，明天，我们会从头开始发开基于Extjs4 MVC模式的应用。

Extjs4开发笔记(二)——框架的搭建

2011-06-29 来源：mhzg 作者：mhzg (共11 条评论)

头部、菜单、内容区及底部则完全分离成4个JS文件，我们将先实现这几个文件的基础功

能，由于使用的是Extjs4，所以我们一定要使用Extjs4 动态加载功能。来动态加载这些文

件。

本文内容已经重新更新，旧版请查看：

/a/20116/

由于最近老出差，所以代码无法及时更新。导致近一周都没有更新。

废话不多说了，上篇文章建立了比较基础的文件。今天开始搭建大体的框架，由于

Extjs4在组件建立方面有了很大的改变，所以第一次建立的框架页面还是费了比较长的时

间。本章内容增加了一些图片及CSS文件，目的是为了美化整个界面。增加的CSS文件：

注意事项：layout、region的使用，如果没有看API及相关文档的话，那么面对错误

对话框的时候，还不知道是怎么回事。

本文将放到了/app/controller文件夹下，这将是整个项目的主体文件。

而头部、菜单、内容区及底部则完全分离成4个JS文件，我们将先实现这几个文件的

基础功能，之后我们会慢慢完善这些组件。而整个页面的填充，也使用一个JS文件来完成。

也许有人会问，这么多文件，是不是要都在中引入啊。这样想的话，就错了哦。

因为我们使用的是Extjs4，所以我们一定要使用Extjs4 动态加载功能。

先来看下自定义CSS（）：

1. #header { background: #7F99BE url(/images/) repeat-x center;

}

2. #header h1 {font-size: 16px;color: #fff;padding: 3px 10px; font-family:"微软雅黑","

黑体"}

3.

4. .tabs{}

5. .tabs{background-image: url(../images/menuPanel/bulletin_) !important;}

6. .manage{background-image: url(../images/menuPanel/) !important;}

7. .home{background-image: url(../images/) !important; line-height:30px;}

8. .icon-menu{background-image: url(../images/menuPanel/) !important;}