ExtJs使用文档

### ExtJs 使用文档知识点概述 #### 1. 什么是 ExtJs？ ExtJS 是一款功能强大的前端 JavaScript 框架，用于构建丰富的用户界面 (RIA) 和 AJAX 应用程序。它是一个与后端技术无关的框架，这意味着它可以与 .Net、Java、PHP 等各种后端技术无缝集成。ExtJS 最初基于 YUI 技术，由开发者 Jack Slocum 开发，借鉴了 Java Swing 的设计理念来构建可视化组件。 **特点：** - **丰富的 UI 组件：** 提供了多种 UI 组件如表格、树型菜单、弹出对话框等。 - **跨浏览器兼容性：** 支持 Internet Explorer 6+、Firefox 1.5+、Safari 2+ 和 Opera 9+ 等主流浏览器。 - **与 jQuery、Prototype 等底层库结合使用：** 可以配置使用这些底层库作为核心库。 #### 2. ExtJs 的环境搭建 ##### 2.1 环境下载及安装 - **下载地址：** [http://www.extjs.com/download/](http://www.extjs.com/download/) - **版本：** 当前最新版本为 3.1.0。 - **文件结构：** - `Adapter`：包含 Ext 的核心代码和底层库（如 jQuery）适配器。 - `Build`：包含压缩后的代码。 - `Docs`：提供 API 文档。 - `Examples`：官方演示示例。 - `Resources`：包含图像和样式等资源文件。 - `ext-all.js`：核心脚本文件，包含了所有组件。 - `ext-all-debug.js`：调试版本。 ##### 2.2 建立前台基于 ExtJs 的应用程序 - **整体架构：** 使用 Spring.NET + NHibernate + ASP.NET MVC + ExtJs 构建。 - **架构特点：** - **松耦合性：** 各个层之间通过接口进行通信。 - **可扩展性：** 易于维护和升级。 - **面向对象设计：** 通过 NHibernate 实现。 **项目结构：** - `DirectCenter.Model`：实体类库，包含 Hibernate 映射文件。 - `DirectCenter.IDAL`：数据访问层接口。 - `DirectCenter.DAL`：数据访问层实现，使用 NHibernate。 - `DirectCenter.IBLL`：业务逻辑层接口。 - `DirectCenter.BLL`：业务逻辑层实现，通过 Spring.NET 的 IOC 注入数据访问层。 - `DirectCenter.App`：系统配置，包括 NHibernate 和 Spring.NET 的配置。 - `DirectCenter.UnitTest`：使用 NUnit 进行单元测试。 - `DirectCenter.DTO`：数据传输对象。 #### 3. 布局组件 - **功能简介：** 提供了各种布局方式来组织 UI 元素。 - **实例应用：** 例如使用 `BorderLayout` 来组织页面的不同部分。 #### 4. 树形组件 - **功能简介：** 用于展示层次结构的数据。 - **实例应用：** 创建一个树形菜单，展示公司的组织结构。 #### 5. 面板组件 - **功能简介：** 用于封装其他组件并提供额外的功能，如折叠、关闭等。 - **实例应用：** 在一个面板中展示用户的个人信息，并允许编辑。 #### 6. 表格组件 - **功能简介：** 用于显示表格数据，并支持排序、过滤等功能。 - **实例应用：** 显示员工列表，并允许按姓名排序。 #### 7. 窗口组件 - **功能简介：** 用于创建弹出窗口，用于显示或编辑数据。 - **实例应用：** 创建一个登录窗口，用于用户登录。 #### 8. 表单组件 - **功能简介：** 用于创建表单，收集用户输入。 - **实例应用：** 创建一个用户注册表单，收集用户名、密码等信息。 #### 9. 附录参考资料 - **官方网站：** [http://www.sencha.com/products/extjs/](http://www.sencha.com/products/extjs/) - **API 文档：** [https://docs.sencha.com/extjs/3.4.0/](https://docs.sencha.com/extjs/3.4.0/) 以上内容涵盖了 ExtJs 使用文档中的主要知识点，包括 ExtJs 的介绍、环境搭建、常见组件的功能和应用实例。希望这些信息能够帮助读者更好地理解和使用 ExtJs 框架。