ExtJs使用 帮助文档.doc

ExtJs使用文档 目录 1 什么是ExtJs 2 2 ExtJs的环境搭建 3 2.1 环境下载及安装 3 2.2 建立前台基于ExtJs的应用程序 4 2.2.1 整体架构 4 2.2.2 数据访问层 10 2.2.3 业务逻辑层 19 2.2.4 界面层 26 2.2.5 将实例部署到IIS 36 2.2.6 测试实例 37 3 布局组件 39 3.1 功能简介 39 3.2 实例应用 40 4 树形组件 41 4.1 功能简介 41 4.2 实例应用 41 5 面板组件 46 5.1 功能简介 46 5.2 实例应用 46 6 表格组件 47 6.1 功能简介 47 6.2 实例应用 48 7 窗口组件 57 7.1 功能简介 57 7.2 实例应用 58 8 表单组件 60 8.1 功能简介 60 8.2 实例应用 60 9 附录 参考资料 63 什么是ExtJs ExtJS是一个主要用于创建前端用户界面、与后台技术无关的前端javascript框架。功能丰富，无人能出其右。ExtJS可以用来开发RIA也即富客户端的AJAX应用，是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。ExtJs最开始基于YUI技术，由开发人员JackSlocum开发，通过参考JavaSwing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript客户端技术的精品。ExtJs支持多平台下的主流浏览器 Internet Explorer 6+ FireFox 1.5+ (PC， Mac) Safari2+、Opera9+。 ExtJs与Jquery、Prototype等底层库有很大的不同点，它提供了丰富的UI组件，像表格、树型菜单、弹出对话框等控件一应俱全，可极大地提交开发人员的工作效率。ExtJS也可与Jquery、Prototype等底层库结合使用，通过配置后可用上述等底层库作为EXTJS的核心库。 本文通过一个基于.net环境的实例来分析EXTJS中的一些常用组件。 ExtJs的环境搭建 环境下载及安装 我们可以从/download/免费下载EXTJS的最新版本，当前最新版本为3.1.0。 我们把EXTJS的发布包做成一个.net的网站，其在VS中的结构图如下： Adapter下放置的是ext的核心代码和底层库，也包括jquery等其他库的适配器。 Build下放置的是ext压缩后的代码。 Docs下是ext的文档，主要为extjs的api介绍。 Examples下是官方的演示示例。 Resourses下是ext的图片和样式等资源文件。 ext-all.js是ext的核心脚本，其中包含了ext的所有组件。ext-all-debug.js是调试版本。 建立前台基于ExtJs的应用程序 本节将使用Spring.Net+NHibernate+Asp.Net MVC + ExtJs构建一个多层应用程序。架构具有松耦合性，接口编程，并且有很强的可扩展性，比较适合企业系统开发相关的产品开发。充分利用Spring.Net的IOC，AOP等特性，并且作为整个框架的容器NHibernate使整个框架更面向对象，并且支持多数据库A MVC一改以往Webform的方式，使界面和后台代码完全分开Extjs则创建出更美观，用户体验更好的界面，能够很方便的完成 、webform很难完成的功能和界面。 整体架构 我们的实例项目名称为DirectCenter，它主要分为用户管理，部门管理，公司管理三个模块。首先先搭建起解决方案DirectCenter： DirectCenter.Model(类库项目)： 实体类库，其中包括hibernate映射文件(可以把映射文件放到DAL层，这样使Model也比较单纯，而DAL则只是Nhibernate的完整实现) DirectCenter.IDAL(类库项目)： 数据访问层接口 DirectCenter.DAL(类库项目)： 数据库访问层实现(采用NHibernate) DirectCenter.IBLL(类库项目)： 业务层接口 DirectCenter.BLL(类库项目)： 业务层实现(使用IDAL，通过的IOC注入实际的数据访问层) DirectCenter.App(类库项目)： 系统的配置，其中包括Nhibernate，S的一些配置信息，业务层的DAL注入 DirectCenter.UnitTest(类库项目)： 使用nun