Extjs4开发笔记(收集整理).pdf

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. 4. .tabs{} 5. .t