extjs实用开发指南

ext教程EXT（JavaScript Extensions）是一种用于制作浏览器扩展的标准，它允许开发者以交互式方式修改和自定义Web页面的行为和外观。

在本教程中，我们将介绍如何使用EXT来开发浏览器扩展。

我们将涵盖EXT的基本概念、开发环境的设置、常用API的使用以及实例应用的创建。

首先，我们需要了解EXT的基本概念。

EXT是基于JavaScript 和HTML的，它允许我们通过注入代码来修改Web页面的行为。

我们可以使用EXT来添加自定义按钮、修改页面样式、拦截网络请求等。

为了开始开发EXT扩展，我们需要设置开发环境。

首先，我们需要安装一个支持EXT的浏览器，如Google Chrome或Mozilla Firefox。

然后，我们需要安装开发者工具，如Chrome开发者工具或Firefox开发者工具。

接下来，我们将介绍EXT的常用API。

EXT提供了一组API，用于访问和修改Web页面的各个部分。

例如，我们可以使用API来找到页面上的特定元素，修改其样式或内容。

我们还可以使用API来发送网络请求或拦截已有的请求。

最后，我们将创建一个实例应用来演示EXT的使用。

我们将开发一个简单的扩展，用于在Facebook页面上添加一个自定义按钮。

当用户点击按钮时，它会向后台服务器发送一个请求，并显示返回的数据。

在这个实例应用中，我们将演示如何创建一个扩展程序，并在Manifest文件中指定其基本属性。

我们还将展示如何使用Content Script来注入我们的代码到页面中，并使用Popup来创建一个显示在浏览器窗口中的弹出窗口。

通过这个教程，您将学习到EXT的基本概念、开发环境的设置、常用API的使用以及实例应用的创建。

您将了解如何使用EXT来修改和自定义Web页面的行为和外观。

这将对您开发具有定制功能的浏览器扩展非常有帮助。

总结来说，EXT是一种用于制作浏览器扩展的标准，它允许开发者以交互式方式修改和自定义Web页面的行为和外观。

序言ExtJS 是一个很不错的Ajax 框架，可以用来开发带有华丽外观的富客户端应用，使得我们的b/s 应用更加具有活力及生命力。

ExtJS 是一个用javascript 编写，与后台技术无关的前端ajax 框架。

因此，可以把ExtJS 用在.Net、Java、Php 等各种开发语言开发的应用中。

最近我们在几个应用都使用到了ExtJS，对公司以前开发的一个OA 系统也正在使用ExtJS2.0 进行改造，使得整个系统在用户体验上有了非常大的变化。

本教程记录了前段时间本人学习ExtJS 的一些心得及小结，希望能帮助正在学习或准备学习ExtJS 的朋友们快速走进ExtJS2.0 的精彩世界。

教程包括ExtJS 的新手入门、组件体系结构及使用、ExtJS 中各控件的使用方法及示例应用等，是一个非常适合新手的ExtJS 入门教程。

本教程主要是针对ExtJ 进行介绍，全部代码、截图等都是基于ExtJS2.0。

在学习了本教程后，可以下载 这个基于ExtJ 开发的单用户Blog 系统的源代码，这个系统是我们团队中的williamraym 与大峡等人开发的一个演示系统，系统源码整体质量比较高，通过学习这套源代码相邻一定能提高您ExtJS 的综合水平。

本教程比较适合ExtJS 的新手作为入门教程及手册使用，并在我的博客/blog/lengyu/上进行发布；应一些朋友的要求，根据本教程的写作思路，我还编写了比本教程更为详细的《ExtJS 实用开发指南》，包含详细的ExtJS 框架使用方法、各个控件详细配置参数、属性、方法及事件介绍，与服务器端集成及一个完整的示例应用系统介绍等内容，适合想深入学习ExtJS 或正在使用ExtJS 进行开发朋友们使用。

该《指南》当前在 作为VIP 文档发布，供该站的VIP 用户阅读及下载。

凡是购买了《ExtJS 实用开发指南》文档的VIP 用户，都可以在该指南印刷版出版后均会免费得到相应的印刷版本。

ext开发手册一、简介EXT是一个针对构建富应用程序的JavaScript框架，它拥有丰富的组件库和强大的功能。

本手册将为开发人员提供完整的EXT开发指南，包括基础知识、常用组件和开发技巧等内容。

二、基础知识1. 安装和配置EXT：首先，下载EXT框架的压缩包并解压到项目的根目录。

然后，在HTML页面中引入EXT的必要文件，包括CSS和JavaScript。

最后，在需要使用EXT的页面中初始化EXT环境。

2. EXT的核心概念：理解EXT的基本概念对于开发者来说至关重要。

常见的核心概念包括组件、容器、布局和事件等。

组件是EXT的基本构建块，它可以是按钮、表单、树等等。

容器负责管理和布局组件，而布局则定义了组件的排列方式。

事件是EXT中的重要特性，可以用于处理用户交互和系统响应。

三、常用组件1. 表单组件：EXT提供了各种强大的表单组件，如文本框、下拉列表、复选框等。

开发人员可以根据需求选择合适的组件，并根据组件的配置进行自定义设置。

例如，可以通过设置验证规则和错误提示来有效地验证用户输入。

2. 树组件：EXT的树组件是管理层次数据的理想选择。

开发人员可以通过构建树节点和设置节点属性来构建一个功能齐全的树结构。

树组件还支持展开、折叠、选择和拖放等交互操作，使得数据的展示与操作更加灵活。

3. 网格组件：EXT的网格组件是处理大量数据的最佳工具。

通过设置网格的列模型和数据模型，可以实现自定义的数据显示和排序。

网格组件还支持分页、过滤和编辑功能，为用户提供便利的数据处理方式。

四、开发技巧1. 使用样式：EXT提供了丰富的CSS样式，可以为组件添加不同的外观和交互效果。

开发人员可以通过应用样式类名称或自定义样式来实现个性化的外观效果。

同时，也可以使用主题文件来快速地改变整个应用程序的外观。

2. 数据绑定：EXT支持将数据与组件进行绑定，以实现动态数据的展示和交互。

通过设置数据模型和绑定关系，可以在数据更新时自动更新组件的显示内容。

ExtJS2.0开发与实践笔记[0]——初识ExtJS简短的前言：随着网络技术的发展，良好的用户体验及丰富的客户端功能已成为Web程序所共同追逐的目标，并扮演非常重要的一环。

基于Ajax应用思想的盛行，prototype、ext、dojo、yui、mootools等越来越多的第三方开源Javascript Library开始涌现，虽然这极大地增加了我们对web应用的扩展可能性，但同时也或多或少的增加了我们的学习难度。

为此，我准备在blog中逐步整理学习心得，已备查找需要及看客指正。

什么是ExtJS?按照Ext开发团队的说法，ExtJS从应用角度上讲是一个用户界面库，而不是一个JavaScript Library。

原本作为Yahoo! UI Library(也就是YUI)的扩展而被开发出来，但从1.1版本开始由于支持者的增多，已经得到了必要的扩充，不再依赖于YUI。

ExtJS可以与prototype.js和jquery等成熟的js库一起使用，也可以作为单独的应用部署到开发中去，Adobe AIR与iPhone开发工具都提供了对Ext的支持。

就我个人的观点而言，在业务处理上讲ExtJS2.0已非常完备，足以满足绝大多数web表示层应用的需求；但是对于解释执行的javascript来讲性能损耗问题却始终无法避免，因此个人不建议在要求响应速度的项目中使用ExtJS进行开发。

ExtJS并不是一个完全免费的项目，他以普通开源版及企业版共存的方式发行，企业版收费标准如下图：<!--[endif]-->我们可以通过/download来获得最新版本的ext框架。

发展简史：运行效果图：<!--[endif]-->如何开发ExtJS2.0应用？针对ExtJS2.0，由于其通过浏览器解释执行，所以我们即可以使用记事本、EditPlus、UltraEdit等方式直接编辑文本文件，也可以通过IDE进行调试开发。

EXT 中文手册开发必备该文档内容取自互联网，详细的介绍了EXT的各部分内容，希望对大家有所帮助pjq2008-5-25EXT 中文手册EXT 中文手册pjq 收集整理22008EXT 中文手册前言本手册所有内容均粘贴自互联网，如有错误，请多见谅。

EXT 中文手册EXT 中文手册pjq 收集整理32008目录EXT 中文手册 (1)EXT 简介 (5)目目錄錄 (5)下载Ext (6)开始！ (6)Element：Ext 的核心 (6)获取多个DOM 的节点 (7)响应事件 (7)使用Widgets (9)使用Ajax (11)EXT 源码概述 (13)揭示源代码 (13)发布Ext 源码时的一些细节 (14)我应该从哪里开始？ (15)适配器Adapters (15)核心Core (15)Javascript 中的作用域（scope） (15)事前准备 (15)定义 (15)正式开始 (16)window 对象 (16)理解作用域 (17)变量的可见度 (17)EXT 程序规划入门 (18)事前准备 (18)需要些什么？ (18)applayout.html (18)applayout.js (19)公开Public、私有Private、特权的Privileged？ (21)重写公共变量 (23)重写（Overriding）公共函数 (23)DomQuery 基础 (24)DomQuery 基础 (24)扩展EXT 组件 (31)文件的创建 (31)Let's go (35)完成 (37)EXT 的布局（Layout） (39)简单的例子 (40)加入内容 (43)开始使用Grid (53)EXT 中文手册EXT 中文手册pjq 收集整理42008步骤一定义数据(Data Definition) (53)步骤二列模型（Column Model） (54)Grid 组件的简易分页 (55)d G rid 数据 (55)的怎么做一个分页的d Gr id (56)栏分页栏r T ool ba r (56)EXT Menu 组件 (57)创建简易菜单 (57)种各种m Item 的类型 (59)m I tem 属性 (59)在在I UI 中摆放菜单 (59)u M enu 的分配方式： (60)练一练 (62)到动态添加菜单按钮到r Too lb ar (62)更方便的是 (63)下一步是 (63)模板（Templates）起步 (63)第一步您的HTML 模板 (63)第二步，将数据加入到模板中 (64)下一步 (64)学习利用模板（Templates）的格式化功能 (64)正式开始 (64)下一步 (66)事件处理 (66)非常基础的例子 (66)处理函数的作用域 (66)传递参数 (67)类设计 (67)对象创建 (67)使用构造器函数 (68)方法共享 (68)表单组件入门 (69)表单体 (69)创建表单字段 (69)完成表单 (70)下一步 (71)为一个表单填充或提交数据 (71)让我们开始吧 (71)读取我们的数据 (72)EXT 中的继承 (73)补充资料 (74)Ext 2 概述 (74)组件模型Component Model (76)容器模型Container Model (80)EXT 中文手册EXT 中文手册pjq 收集整理52008布局Layouts (81)Grid (84)XTemplate (84)DataView (85)其它新组件 (85)EXT2 简介 (86)下载Ext (86)开始！ (87)Element：Ext 的核心 (87)获取多个DOM 的节点 (88)响应事件 (88)使用Widgets (90)編輯使用Ajax (93)TabPanel 基础 (96)Step 1: 创建HTML 骨架 (96)Step 2: Ext 结构的构建 (97)Step 3: 创建Tab 控制逻辑 (99)EXT 简介无论你是Ext 库的新手，抑或是想了解Ext 的人，本篇文章的内容都适合你。

Extjs5开发学习-28-加入模块和菜单定义[1建立数据库和表]下面我们开始进入自定义系统的设计和各个组成部分的搭建工作。

首先在sql server中建立数据库，这里的数据的名字我定义为extjs5，然后需要建立模块的定义表，这个表里将存着系统中所有模块的定义信息。

为了能有个直观的前后台的互动，先把模块和菜单这二个部分加进去，可以把菜单数据组织好后发送到前台去进行展示。

由于系统中的模块很多，需要分类，因此在先要设计一个“模块分组”的表，对于菜单也是一样，需要有一个“菜单分组”的表。

▪模块分组表：_ModuleGroup▪模块表：_Module▪菜单分组表：_MenuGroup▪模块的菜单定义表：_MenuModule一、数据库中建表四个表的关系如下图所示：下面是建表的语句：[sql]view plain copy1.CREATE TABLE [dbo].[_ModuleGroup](2. [tf_moduleGroupId] [nvarchar](10) COLLATE Chinese_PRC_CI_AS NOT NULL,3. [tf_title] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NOT NULL,4. [tf_description] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,5. [tf_iconURL] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,6. [tf_remark] [nvarchar](max) COLLATE Chinese_PRC_CI_AS NULL,7.CONSTRAINT [PK___ModuleGroup__08EA5793] PRIMARY KEY CLUSTERED8.(9. [tf_moduleGroupId] ASC10.)WITH (IGNORE_DUP_KEY = OFF) ON [PRIMARY],11.CONSTRAINT [_ModuleGroup_ix1] UNIQUE NONCLUSTERED12.(13. [tf_title] ASC14.)WITH (IGNORE_DUP_KEY = OFF) ON [PRIMARY]15.) ON [PRIMARY][sql]view plain copy1.CREATE TABLE [dbo].[_Module](2. [tf_moduleId] [nvarchar](10) COLLATE Chinese_PRC_CI_AS NOT NULL,3. [tf_moduleGroupId] [nvarchar](10) COLLATE Chinese_PRC_CI_AS NOT NULL,4. [tf_moduleName] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NOT NULL,5. [tf_title] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NOT NULL,6. [tf_description] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,7. [tf_requestMapping] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NOT NULL,8. [tf_iconURL] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,9. [tf_shortname] [nvarchar](20) COLLATE Chinese_PRC_CI_AS NULL,10. [tf_englishname] [nvarchar](20) COLLATE Chinese_PRC_CI_AS NULL,11. [tf_tableName] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,12. [tf_primaryKey] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NOT NULL,13. [tf_nameFields] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NOT NULL,14. [tf_titleTpl] [nvarchar](200) COLLATE Chinese_PRC_CI_AS NULL,15. [tf_codeField] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,16. [tf_orderField] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,17. [tf_dateField] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,18. [tf_yearField] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,19. [tf_monthField] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,20. [tf_seasonField] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,21. [tf_fileField] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,22. [tf_homepageTag] [int] NULL,23. [tf_isEnable] [bit] NOT NULL,24. [tf_hasBrowse] [bit] NOT NULL,25. [tf_hasInsert] [bit] NOT NULL,26. [tf_hasEdit] [bit] NOT NULL,27. [tf_hasDelete] [bit] NOT NULL,28. [tf_hasExec] [bit] NOT NULL,29. [tf_hasAuditing] [bit] NOT NULL,30. [tf_hasApprove] [bit] NOT NULL,31. [tf_hasPayment] [bit] NOT NULL,32. [tf_hasAddition] [bit] NOT NULL,33. [tf_isInlineOper] [bit] NULL CONSTRAINT [DF___Module__tf_isIn__1ED998B2] DEFAULT ((0)),34. [tf_allowInsertExcel] [bit] NOT NULL,35. [tf_allowEditExcel] [bit] NOT NULL,36. [tf_defaultOrderField] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,37. [tf_codeLevel] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,38. [tf_linkedModule] [nvarchar](200) COLLATE Chinese_PRC_CI_AS NULL,39. [tf_hasChart] [bit] NOT NULL,40. [tf_canLimit] [bit] NOT NULL,41. [tf_isSystem] [bit] NOT NULL,42. [tf_searchCondOrder] [int] NULL,43. [tf_remark] [nvarchar](max) COLLATE Chinese_PRC_CI_AS NULL,44.CONSTRAINT [PK___Module__1BFD2C07] PRIMARY KEY CLUSTERED45.(46. [tf_moduleId] ASC47.)WITH (IGNORE_DUP_KEY = OFF) ON [PRIMARY],48.CONSTRAINT [_Module_ix1] UNIQUE NONCLUSTERED49.(50. [tf_moduleName] ASC51.)WITH (IGNORE_DUP_KEY = OFF) ON [PRIMARY],52.CONSTRAINT [_Module_ix2] UNIQUE NONCLUSTERED53.(54. [tf_title] ASC55.)WITH (IGNORE_DUP_KEY = OFF) ON [PRIMARY]56.) ON [PRIMARY]57.58.GOE [extjs5]60.GO61.ALTER TABLE [dbo].[_Module] WITH CHECK ADD CONSTRAINT [_Module_fk1]FOREIGN KEY([tf_moduleGroupId])62.REFERENCES [dbo].[_ModuleGroup] ([tf_moduleGroupId])63.ON UPDATE CASCADE[sql]view plain copy1.CREATE TABLE [dbo].[_MenuGroup](2. [tf_menuGroupId] [nvarchar](10) COLLATE Chinese_PRC_CI_AS NOT NULL,3. [tf_title] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NOT NULL,4. [tf_description] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,5. [tf_glyph] [nvarchar](10) COLLATE Chinese_PRC_CI_AS NULL,6. [tf_iconURL] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,7. [tf_remark] [nvarchar](max) COLLATE Chinese_PRC_CI_AS NULL,8. [tf_expand] [bit] NULL,9.CONSTRAINT [PK___MenuGroup__1920BF5C] PRIMARY KEY CLUSTERED10.(11. [tf_menuGroupId] ASC12.)WITH (IGNORE_DUP_KEY = OFF) ON [PRIMARY],13.CONSTRAINT [_MenuGroup_ix1] UNIQUE NONCLUSTERED14.(15. [tf_title] ASC16.)WITH (IGNORE_DUP_KEY = OFF) ON [PRIMARY]17.) ON [PRIMARY][sql]view plain copy1.CREATE TABLE [dbo].[_MenuModule](2. [tf_menuModuleId] [int] NOT NULL,3. [tf_menuGroupId] [nvarchar](10) COLLATE Chinese_PRC_CI_AS NOT NULL,4. [tf_moduleId] [nvarchar](10) COLLATE Chinese_PRC_CI_AS NOT NULL,5. [tf_orderId] [int] NULL,6. [tf_addSeparator] [bit] NULL,7. [tf_parentMenu] [nvarchar](20) COLLATE Chinese_PRC_CI_AS NULL,8. [tf_title] [nvarchar](50) COLLATE Chinese_PRC_CI_AS NULL,9. [tf_parentFilter] [nvarchar](max) COLLATE Chinese_PRC_CI_AS NULL,10.CONSTRAINT [PK___MenuModule__2C3393D0] PRIMARY KEY CLUSTERED11.(12. [tf_menuModuleId] ASC13.)WITH (IGNORE_DUP_KEY = OFF) ON [PRIMARY]14.) ON [PRIMARY]15.16.GOE [extjs5]18.GO19.ALTER TABLE [dbo].[_MenuModule] WITH CHECK ADD CONSTRAINT [_MenuModule_fk1] FOREIGN KEY([tf_menuGroupId])20.REFERENCES [dbo].[_MenuGroup] ([tf_menuGroupId])21.ON UPDATE CASCADE22.GO23.ALTER TABLE [dbo].[_MenuModule] WITH CHECK ADD CONSTRAINT [_MenuModule_fk2] FOREIGN KEY([tf_moduleId])24.REFERENCES [dbo].[_Module] ([tf_moduleId])25.ON UPDATE CASCADE建立表后加入一些数据：。

ExtJS快速入门指南一、ExtJS框架简介 (1)二、如何使用Ext (2)三、Ext组件 (3)1、组件简介 (3)2、组件XType (4)3、组件应用 (4)4、组件配置选项 (5)5、组件属性 (6)6、组件方法 (6)四、事件及事件响应 (7)五、Component及Container简介 (10)1、ponent (10)2、tainer (10)六、面板Ext.Panel (11)面板Panel简介 (11)面板内容 (12)面板与DOM节点DIV (13)七、ViewPort (14)八、窗口Window (17)九、对话框 (18)十、TabPanel (22)十一、布局 (26)十二、表格Grid (29)十三、TreePanel (30)十四、表单Form (32)十五、理解Html DOM、Ext Element及Component (34)十六、Ext类中的get方法简介 (35)十七、如何学习及掌握Ext (37)一、ExtJS框架简介ExtJS也就是Ext框架，官方网址为，ExtJS是一个Ajax框架，是一个用javascript写的，用于在客户端创建丰富多彩的web应用程序界面。

ExtJS可以用来开发RIA(Rich Internet Application，富互联网应用系统)的开源AJAX应用框架，使用的开源协议是GPL。

ExtJS是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端Ajax框架。

因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。

ExtJs最开始基于UI技术，由开发人员Jack Slocum开发，通过参考Java Swing等机制来组织可视化组件，无论从UI界面上CSS样式的应用，到数据解析上的异常处理，都可算是一款不可多得的JavaScript客户端技术的精品。

二、如何使用Ext首先从ext官方网站下载ext的sdk，把sdk拷到web应用程序目录，然后即可在web 页面中直接通过<script>标签引入ext的库文件，就可以使用javascript调用ext的各种控件。

EXTJS实用开发指南1、要使用ExtJS 框架的页面中一般包括下面几句：<link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" /> <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="extjs/ext-all.js"></script>Ext.BLANK_IMAGE_URL = '../../js/ext2/resources/images/default/tree/s.gif';在ExtJS 库文件及页面内容加载完后，ExtJS 会执行Ext.onReady 中指定的函数，因此可以用，一般情况下每一个用户的ExtJS 应用都是从Ext.onReady 开始的，使用ExtJS 应用，程序的代码大致如下：<script>function fn(){alert(“ExtJS库已加”);}Ext.onReady(fn);</script>2、A：fn 也可以写成一个匿名函数的形式，因此上面的代码可以改成下面的形式：<script>Ext.onReady(function (){alert(“ExtJS库已加载!”);});</script>B：进一步，我们可以在页面上显示一个窗口，代码如下：<script>Ext.onReady(function(){Varwin=new Ext.Window({title:"hello",width:300,height:200,html:'<h1>Hello,easyjfopen source</h1>'});//参数是"标题,宽度,高度,html文本"win.show();});</script>3、ExtJS 的类库由以下几部分组成：底层API(core)：底层API 中提供了对DOM 操作、查询的封装、事件处理、DOM 查询器等基础的功能。

第一章起步在这章里，我们将介绍ExtJS的基本功能。

如果你对web开发熟悉的话，您会惊诧于ExtJS框架的优雅！不同其他的JavaScript库，ExtJS为您的开发夯实了基础，只需几行代码，你就可以制作出丰富的用户界面。

本章包括：1. ExtJS的功能和您将会喜爱上它的原因；2. 如何获得Ext并在web应用中采用它；3. 采用”适配器(adapters)“使得Ext和其他的JavaScript库共存；4. 充分利用AJAX技术；5. 在您的语言中展示ExtJS对象；关于Ext：我们采用最新的的Ext 2.x版本，1.x版本到2.x版本的是一个重组的过程，包括添加新的组件、重命名组件用来重新组织结构等等。

这使得1.x和2.x兼容性很低。

3.x 版本则不然，他对2.x有很强的兼容性，可以很好的联合本书中所设计的内容。

Ext的开发组决定在日后的版本发布中都做到向前兼容。

Ext库是对雅虎YUI的一个拓展，提供了它所不支持的特性：良好的API，真实的控件。

虽然YUI致力于用户界面，但是它却没有提供许多有用的功能。

Ext的产生源自于开发者、开源贡献者们将YUI扩展成一个强大的客户端应用程序库的努力。

Ext提供了一个简单丰富的用户界面，如同桌面程序一般。

这使得开发者能够把精力更多的转移到实现应用的功能上。

Ext官网上的示例会让你知道它是如何的不可思议：/deploy/dev/examples/。

其中最引人注目的一个例子就是Feed Viewer，它展示了Ext.However提供的多种特性，对于学习来说它可能太复杂了，所以现在只需你感受它带给你的精彩。

另外一个精彩的例子就是Simple Task任务跟踪程序，它加载了Google Gears的数据库。

Ext: 不仅仅是另一个JS库：Ext不仅仅是另一个JS库，实际上它可以通过适配器（adapter）和其它JS库一起工作。

我们将在本章的稍后来介绍适配器。

通常来说，我们使用Ext的目的是满足高层次的用户交互——要比我们传统概念上的站点交互性更强。

入门环境要求浏览器ExtJs支持所有主要的网络浏览器，从IE6到最新版本的谷歌浏览器，在开发调试工程中，我们推荐您使用：这篇教程假设你使用的是最新版本的谷歌浏览器。

如果你没有，花一点时间来安装它,并自己熟悉其开发工具。

服务器尽管不是必须，我们建议你使用本地网络服务器。

由于XHR 在本地文件时大多数浏览器有协议限制。

我们建议安装：Apache安装启动后，通过浏览器访问localhost，你应该看到一个Apache启动成功网页。

Ext JS 4 SDK下载SDK解压到服务器WEB目录的新建文件夹“ExtJS”下，不清楚服务器的WEB目录请参考服务器的手册。

这个路径和操作系统有关。

一般来说Apache的WEB目录为：浏览http://localhost/extjs/index.html看到Ext的欢迎页面就算安装成功了。

应用构架基本结构尽管不是强制的,下面列出的所有建议应看作是你的指导方针保证您应用是有效组织、可扩展和可维护的。

以下是建议的Ext目录结构为:不要着急立即完成所有这些目录，现在让我们专注开发Ext 应用必要的最少代码。

我们将创造一个基本的"Hello Word"应用：称为“Hello Ext”。

在您的网页根目录创造下列目录和文件。

将包含Extjs SDK的Extjs文件夹放到helloext目录下。

典型的Ext应用包含单一的Html文档--index.html文件：下面是应用程序逻辑：---app.js打开浏览器浏览http://localhost/helloext/index.html。

将看到一个面板标题为"Hello Ext"，内容为"welcome"。

动态加载ExtJS4支持延迟-动态加载。

例如Ext.create创建了一个Ext.container.Viewport实例。

在Ext.create被调用时，加载器首先减产Ext.container.Viewport是否定义。

ExtJS开发步骤说明一. 准备工作：1.1 ExtJS所需文件列表首先将ExtJS的相关源代码,置于项目WebRoot目录下,目录结构如下：----WebRoot----extEngine----adapter----builder----resources----sourceext-all.jsext-all-debug.jsext-core.jsext-back-format.jsext-core-debug.js(从CVS上check的代码中已包含这部分代码)1.2 开发时页面可能需要的资源1．必须的Ext相关的资源：extEngine/ext-all.jsextEngine/adapter/ext/ext-base.jsextEngine/resources/css/ext-all.cssjs/ext-lang-zh_CN-GBK.js (汉化)2．分页js：js/PagingToolbarExt.js3. 关闭tab页js：js/TabCloseMenu.js4. 页面共用的js：js/b2bcommon.js5. 相关css文件：css/b2b-grid.css6. 文件上传js:b2b/Ext.ux.UploadDialog.js二．实例开发：下面以产品中心——产品——产品信息查询为例：概述整个页面布局是ExtJS的border布局：north-west-center-south主面板为一个TabPanel, 位于主页面的一个id为center的div，也就是页面右边的区域2.1主页面index.jsp<script type=”text/javascript”>va r mainPanel = ne w Ext.TabPane l({i d:"mai n",titl e:"主工作区",regio n:"cente r", //位于center区域deferredRende r:fal se,enableTabScrol l:tr ue, //可以滚动activeTab: 0,autoDestro y: fal se,item s:{titl e:'我的工作台',i d:'tod o',xtyp e:'porta l',items:[{columnWidth:.37,styl e:'padding:10px 0px 0px 10p x',items:[{title: '待办事宜列表',layou t:'fi t',tools: tools,items: ne w SampleGrid([0, 2, 3])},{title: '系统通知',tools: tools,html: systemNotice}]},{columnWidth:.37,styl e:'padding:10px 0px 0px 10p x',items:[{title: '产品信息',layou t:'fi t',tools: tools,items: ne w FileInfoGrid([0, 1, 2, 3])},{title: '审批通知',tools: tools,html: Ext.example.shortBogusMarkup}]},{columnWidth:.24,styl e:'padding:10px 0px 10px 10p x',items:[{title: '日历',item s:ne w My.ExtCalendar(),draggabl e:fal se,collapsibl e:false},{title: '采购通知',tools: tools,html: Ext.example.shortBogusMarkup}]}]},plugins: ne w Ext.ux.TabCloseMenu() //tabPanel设置可以关闭插件 });//通过tabFrame.jsp中的iframe,向主面板中添加tab页functio n addTab(id,tabTitle, targetUr l){mainPanel.ad d({id:id,title: tabTitle,iconCls: 'tab s',autoLoad: {url: "tabFrame.jsp?url="+targetUrl, scope: thi s},autoScrol l:fal se,closable:true}).show();}//tabFrame.jsp的代码如下：//<%@ page language="java" pageEncoding="utf-8"%>//<%@taglib uri="/jsp/jstl/core" prefix="c"%>//<IFRAME SRC="${param.url}" width="100%" height="100%" frameborder="0"></IFRAME> //tabFrame.jsp 是通过iframe加载页面到center区域中//更新tab页functio n updateTab(id,title, url) {va r tab = mainPanel.getItem(id);if(ta b){ //如果tab页已存在，就先删除mainPanel.remove(tab);}tab = addTab(id,title,url); //添加tab页mainPanel.setActiveTab(tab); //将当前的tab页置为活动的，即在center区域中显示当前的tab页}//ExtJS代码的执行写在Ext.onReady(function(){ js代码块});Ext.onReady(function(){//设置显示提示Ext.QuickTips.init();//设置cookieExt.state.Manager.setProvider(new Ext.state.CookieProvider());//创建产品中心导航栏的根结点var root = new Ext.tree.TreeNode({id:'productCenter', //根结点id,在一个页面上要保证唯一text:'产品中心', //根结点名称expanded:true //展开此结点，缺省为false});//创建产品分支结点var productNode = new Ext.tree.TreeNode({id:'product',text:'产品',expanded:true});//创建产品信息查询叶子结点var productSearchNode = new Ext.tree.TreeNode({id:'productInfo',text:'产品信息查询',leaf:true, //叶子结点icon:'images/other/class.gif', //图标cls:"x-btn-text-icon" //样式});//创建产品历史查询叶子结点var productHistoryNode = new Ext.tree.TreeNode({id:'productHistory',text:'产品历史查询',leaf:true,icon:'images/other/class.gif'});//将“产品信息查询”叶子结点添加到分支结点“产品“上productNode.appendChild(productSearchNode);//将“产品历史查询”叶子结点添加到分支结点“产品“上productNode.appendChild(productHistoryNode);//将“产品“分支结点添加到树根”产品中心“上root.appendChild(productNode);//创建产品中心Panelvar productPanel = new Ext.Panel({contentEl: 'west_1', //productPanel定位于页面的一个id为‘west_1’的div title:'产品中心', //显示在viewPort左侧导航栏上的标题border:false, //有无边框iconCls:'nav', //设置图标样式animate:true, //是否有动画显示效果items:[productTree], //将“产品中心“树添加到此面板中cls:"x-btn-text-icon" //指定样式});//给“产品中心“树添加Click事件监听productTree.on("click",function (node){var id = node.id; //树结点的id//如果点击了“产品中心“或”产品“结点，就返回if(id=="productCenter"||id=="product")return;//如果点击了“产品查询“结点,就在右边的center区域显示part.jspif(id=="productInfo"){ //产品信息查询（添删改查）updateTab("productInfo","产品信息查询","${pageContext.request.contextPath}/b2b/part.jsp");}else if(id=="productHistory"){ //产品历史查询-按产品查询（添删改查）updateTab("productHistory","产品历史查询","${pageContext.request.contextPath}/b2b/partEvent.jsp");}mainPanel.doLayout(); //呈现页面});//定义一个Viewport,Viewport代表整个浏览器显示区域，其布局指定为boder布局va r viewport = ne w Ext.Viewpor t({layou t:'borde r',items:[ne w Ext.BoxComponen t({ //设置viewport的north区域regio n:'nort h', //定位在north区域,即页面顶部el: 'nort h',height:32}),ne w Ext.BoxComponen t({ //设置viewport的south区域regio n:'sout h', //定位在south区域,即页面底部el: 'sout h',height:20}),{ //设置west区域,即左边导航栏区域regio n:'wes t', //定位在west区域,即左边i d:'west-pane l',titl e:'B2B管理系统',cl s:"x-btn-text-ico n",spli t:tr ue,iconCl s:'forwar d',width: 200,minSize: 175,maxSize: 400,collapsible: tr ue,margin s:'0 0 0 5',layou t:'accordio n', //指定布局layoutConfi g:{animat e:true},//将导航栏的面板和mainPanel添加到viewport中items:[todoPanel,productPanel,orderPanel,storagePanel,systemPanel,userInfoPanel,helpPanel] },mainPanel]});});</script><div id="west"><ul id="west_1" class="munuList"></ul><ul id="west_2" class="munuList"></ul><ul id="west_3" class="munuList"></ul><ul id="west_4" class="munuList"></ul><ul id="west_5" class="munuList"></ul><ul id="west_6" class="munuList"></ul><ul id="west_7" class="munuList"></ul></div><div id="north"></div><div id="south"></div><div id="center"></div>2.2 产品信息查询页面产品信息查询页面主要包括：查询表单PartSearchForm和产品信息面板ProductPanel。

ExtJs2.0学习系列(1)--Ext.MessageBox（详细版）大家都知道,刚开始搞extjs的时候,很是有点困难,所以本人在新手刚入门后准备了这个系列的文章.个人认为用extjs做后台很不错,布局比较完美!1.Ext.MessageBox.alert()有四个参数,为简单起见,主要介绍前面三个参数:alert( title , msg , function(){} );其中title,msg为必选参数,function为可选参数,在关闭弹出窗口后触发.【注意】Ext.MessageBox.alert("title","msg",function(e){alert("按钮的值:"+e);});参数e: 两种值 (ok,cancel).2.Ext.MessageBox.confirm()基本上同 alert() 方法一模一样.【注意】Ext.MessageBox.confirm("title","msg",function(e){alert("按钮的值:"+e);});参数e:三种值(yes,no,cancel).3.Ext.MessageBox.prompt()有六个参数,比前面alert方法多一个返回值和是否多行.Ext.MessageBox.prompt("title","msg");【注意】e是按钮返回值,text是文本框中的输入容,true为多行,this表示作用域4.Ext.MessageBox.show()功能很强大,采用config配置形式,比前面的方法使用更方便.参数很多,在此列举最常用的配置参数:a)animEl:对话框弹出和关闭时的动画效果,比如设置为”id1”,则从id1处弹出并产生动画,收缩则相反;b)buttons:弹出框按钮的设置,【Ext.Msg.OK】【Ext.Msg.OKCANCEL】【Ext.Msg.CAMCEL】【Ext.Msg.YESNO】【Ext.Msg.YESNOCANCEL】可以自定义按钮上面的字:{"ok","我本来是ok的"},若设为false,则不显示任何按钮,默认为false.c)closable:如果为false,则不显示右上角的小叉叉,默认为true;d)msg:消息的容;e)title:标题;f)fn:关闭弹出框后执行的函数;g)icon:弹出框容前面的图标,【】【Ext.MessageBox.ERROR】【Ext.MessageBox.WARNING】【Ext.MessageBox.QUESTION】h)width:弹出框的宽度,不带单位;i)prompt:设为true,则弹出框带有输入框,默认为false;j)multiline:设为true,则弹出框带有多行输入框k)progress:设为true,显示进度条,(但是是死的)l)progressText:显示在进度条上的字m)wait:设为true,动态显示progressn)5.Ext.MessageBox.show()中的进度条的使用首先必须知道另外两个方法Ext.MessageBox.hide()和Ext.MessageBox.updateProgress(value,"ProgressText","msg")(三个参数,看名字就知道意思), 【注意】value为0-1之间的数,表示进度条的进度.第一种:(通过进度的大小控制进度,满进度为1)Ext.get("btn1").on("click",function(){Ext.MessageBox.show({title:"df",msg:"dfd",progress:true,width:300,closable:true});var f=function(v){return function(){if(v==12) {Ext.MessageBox.hide();}Else{var i=v/11;Ext.MessageBox.updateProgress(i,Math.round(100*i)+"% completed",i);}}}for(var i=1;i<13;i++){setTimeout(f(i),i*500);//从点击时就开始计时,所以500*i表示每500ms就执行一次}});第二种:(通过固定时间控制进度加载)Ext.get("btn1").on("click",function(){Ext.MessageBox.show({title:"时间进度条",msg:"5s后关闭进度框",progress:true,width:300,wait:true,waitConfig:{interval:600},//0.6s进度条自动加载一定长度closable:true});setTimeout(function(){Ext.MessageBox.hide()},5000);//5后执行关闭窗口函数}最后关于那个waitConfig的参数,在此说明下:a)interval:进度的频率b)duration:执行进度的持续时间,超过这个时间后,interval失效,不再产生进度效果,但进度狂也不会消失.c)fn:duration的时间到后执行的函数所以,上面的通过时间控制进度另外一种写法为:Ext.get("btn1").on("click",function(){Ext.MessageBox.show({title:"时间进度条",msg:"5s后关闭进度框",progress:true,width:300,wait:true,waitConfig:{interval:600,duration:5000,ExtJs2.0学习系列(2)--Ext.Panel今天介绍 extjs 中的 Panel 组件.因为panel组件的子类组件包括TabPanel,GridPanel,FormPanel,TreePanel 组件,所以非常有必要介绍Panel组件的配置参数和相关的属性、方法.//配置参数(只列举部分常用参数)a)autoLoad:有效的url字符串,把那个url中的body中的数据加载显示,但是可能没有样式和js控制,只是html数据b)autoScroll:设为true 则容溢出的时候产生滚动条,默认为falsec)autoShow:设为true显示设为"x-hidden"的元素,很有必要,默认为falsed)bbar:底部条,显示在主体, //代码:bbar:[{text:'底部工具栏bottomToolbar'}]e)tbar:顶部条,显示在主体, //代码:tbar:[{text:'顶部工具栏topToolbar'}]f)buttons:按钮集合,自动添加到footer中(footer参数,显示在主体外)// 代码 :buttons:[{text:"按钮位于footer"}]g)buttonAlign:footer中按钮的位置,枚举值为:"left","right","center",默认为righth)collapsible:设为true,显示右上角的收缩按钮,默认为falsei)draggable:true则可拖动,但需要你提供操作过程,默认为falsej)html:主体的容k)id:id值,通过id可以找到这个组件,建议一般加上这个id值l)width:宽度m)height:高度n)title:标题o)titleCollapse:设为true,则点击标题栏的任何地方都能收缩,默认为false.p)applyTo:(id)呈现在哪个html元素里面q)contentEl:(id)呈现哪个html元素里面,把el的容呈现r)renderTo:(id)呈现在哪个html元素里面// 关于这三个参数的区别(个人认为:applyTo和RenderTo强调to到html元素中,contentEl则是html元素到ext组件中去);关于contentEl有资料如下:ContentEl - This config option is used to take existing content and place it in the bod y of a new panel. It is not going to be the actual panel itself. (It will actually copy t he innerHTML of the el and use it for the body). You should add either the x-hidden or the x-hide-display CSS class to prevent a brief flicker of the content before it is rendered to the panel.ApplyTo - This config option allows you to use pre-defined markup to create an entire Pa nel. By entire, I mean you can include the header, tbar, body, footer, etc. These elements m ust be in the correct order/hierarchy. Any components which are not found and need to be cre ated will be autogenerated.RenderTo - This config option allows you to render a Panel as its created. This would b e the same as saying myPanel.render(ELEMENT_TO_RENDER_TO);考虑到入门,方法事件会在以后的文章中以实例穿插.1.可拖动的panel实例下面我们做个可拖动panel例子来熟悉下panel这个最基本的组件.}).show(); //在这里也可以不show()但是还不能拖到其他的地方,我们需要改写draggable:draggable:{insertProxy: false,//拖动时不虚线显示原始位置onDrag : function(e){var pel = this.proxy.getEl();this.x = pel.getLeft(true);this.y = pel.getTop(true);//获取拖动时panel的坐标},endDrag : function(e){this.panel.setPosition(this.x, this.y);//移动到最终位置}}实现了可保存的拖动,如图:拖动的时候阴影还在原位置,我们再在draggable中的onDrag事件中添加代码: //shadow的realign方法的四个参数,改变shadow的位置大小属性var s = this.panel.getEl().shadow;if (s) {s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());}最后这个可拖动的panel的代码为:var p=new Ext.Panel({title: 'Drag me',x: 100,y: 100,renderTo: Ext.getBody(),floating: true,width: 400,height: 200,draggable: {insertProxy: false,onDrag : function(e){var pel = this.proxy.getEl();this.x = pel.getLeft(true);this.y = pel.getTop(true);var s = this.panel.getEl().shadow;if (s) {s.realign(this.x, this.y, pel.getWidth(), pel.getHeight());}},endDrag : function(e){this.panel.setPosition(this.x, this.y);}}})2.带顶部,底部,脚部工具栏的panel我们已经在各种工具栏上添加了按钮,但是却没有激发事件,下面我们来添加按钮事件代码: tbar:[{text:"按钮1",handler:function(){Ext.MessageBox.alert("我是按钮1","我是通过按钮1激发出来的弹出框!")}},{text:"按钮2"}],改写tbar,添加handler句柄,点击顶部工具栏上按钮1,弹出提示框,效果图大家想象下,就不贴出来了当然,一般情况下,我们只要一个工具栏,这里只是为了演示!3.panel工具栏添加下面的代码到panel配置参数中:tools:[{id:"save"},{id:"help"},{id:"up"},{id:"close",handler:function(){Ext.MessageBox.alert("工具栏按钮","工具栏上的关闭按钮时间被激发了")}}],//id控制按钮,handler控制相应的事件id的枚举值为:toggle (collapsable为true时的默认值)close minimize maximize restore gear pinunpin right left up down refreshminus plus help search save printExtJs2.0学习系列(3)--Ext.Window介绍window组件,它继承自panel.先介绍个最简单例子<!-- html代码 --><div id="win" class="x-hidden"></div>//js代码var w=new Ext.Window({contentEl:"win",//主体显示的html元素,也可以写为el:"win"width:300,height:200,title:"标题"});w.show();参数介绍:因为前面已经介绍了panel组件,下面只介绍window组件的几个其他特别的配置参数//几个前面没有介绍的window自己的配置参数a)closeAction:枚举值为:close(默认值),当点击关闭后,关闭window窗口,关闭后,只是hidden窗口b)closable:true在右上角显示小叉叉的关闭按钮,默认为truec)constrain:true则强制此window控制在viewport,默认为falsed)modal:true为模式窗口,后面的容都不能操作,默认为falsee)plain://true则主体背景透明,false则主体有小差别的背景色,默认为falsew.show()//需要显示下show()方法,默认的窗口是可拖动的,可关闭的,可拖动大小的实例介绍:1.嵌套了tabpanel的windowvar w=new Ext.Window({contentEl:"win",width:300,height:200,items:new Ext.TabPanel({activeTab:0,//当前标签为第1个tab(从0开始索引)border:false,items:[{title:"tab1",html:"tab1在windows窗口中"},{title:"tab2",html:"tab2在windows窗口中"}]}),plain:true,//true则主体背景透明,false则主体有小差别的背景色,默认为falsetitle:"标题"});w.show();我们通过items把TabPanel组件嵌套在window的主体中去了.我们再添加工具栏看看bbar:[{text:"确定"},{text:"取消",handler:function(){w.close();}}],//bottom部buttons:[{text:"确定"},{text:"取消",handler:function(){w.close();}}],//footer部buttonAlign:"center",//footer部按钮排列位置,这里是中间其他工具栏方法一样.关于window中嵌套复杂的布局,等我们谈完了extjs布局再举例说明.ExtJs2.0学习系列(4)--Ext.FormPanel之第一式上篇中我们讨论了Ext.window的简单使用,今天我们要看看强大的FormPanel,也是继承panel组件的使用. 首先弄清楚这个问题,创建的时候:Ext.form.FormPanel = Ext.FormPanel;//查看源代码便知,两种方法是一样的我们还是从最简单的代码实例开始吧:<!--html代码--><div id="form1"></div>//js代码var form1 = new Ext.form.FormPanel({width:350,frame:true,//圆角和浅蓝色背景renderTo:"form1",//呈现在哪个控件里title:"FormPanel",bodyStyle:"padding:5px 5px 0",items:[{fieldLabel:"UserName",//文本框标题xtype:"textfield", //表单文本框name:"user",id:"user",width:200},{fieldLabel:"PassWord",xtype:"textfield",name:"pass",id:"pass",width:200}],buttons:[{text:"确定"},{text:"取消",handler:function(){alert("事件!");}}] });都是通过items属性参数把表单元素添加到这个表单中.我们发现两个文本框的类型和宽度是一样的,我们还可以把items里面的相同项提取出来,以简化代码: //简化代码,和上面的代码效果一样var form1 = new Ext.form.FormPanel({width:350,frame:true,renderTo:"form1",title:"FormPanel",bodyStyle:"padding:5px 5px 0",defaults:{width:200,xtype:"textfield"},//*****简化****//items:[{fieldLabel:"UserName",//xtype:"textfield",name:"user",id:"user",//width:200},{fieldLabel:"PassWord",//xtype:"textfield",name:"pass",id:"pass",inputType:"password",//width:200}],buttons:[{text:"确定"},{text:"取消",handler:function(){alert();}}] });关于inputType参数(同input类型相同,只列举几个典型的)如下:radio check text(默认) file password等等关于FormPanel的配置参数,请主要参考panel的参数,这里列举另外两个:a)labelAlign:fieldlabel的排列位置,默认为"left",其他两个枚举值是"center","right"b)labelWidth:fieldlabel的占位宽c)method:"get"或"post"d)url:"提交的地址"e)submit:提交函数因为容太多,我们先看一个例子.1.FormPanel的fieldset应用//把前面代码重写items属性items:[{xtype:'fieldset',title: '个人信息',collapsible: true,autoHeight:true,width:330,defaults: {width: 150},defaultType: 'textfield',items :[{fieldLabel: '爱好',name: 'hobby',value: '.cnblogs.'},{xtype:"combo",name: 'sex',store:["男","女",""],//数据源为一数组fieldLabel:"性别",emptyText:'请选择性别.'}]}]这里的combox组件只是简单的演示,具体还是要深入了解,我们会在以后的容中详细探讨.2.关于xtype的类型,在extjs的form表单(其他的请参考api)中已经定义的有:Form componentsa)form Ext.FormPanelb)checkbox Ext.form.Checkboxc)combo boBoxd)datefield Ext.form.DateFielde)field Ext.form.Fieldf)fieldset Ext.form.FieldSetg)hidden Ext.form.Hiddenh)htmleditor Ext.form.HtmlEditori)label belj)numberfield Ext.form.NumberFieldk)radio Ext.form.Radiol)textarea Ext.form.TextAream)textfield Ext.form.TextFieldn)timefield Ext.form.TimeFieldo)trigger Ext.form.TriggerField不早了,FormPanel还有很多的东西要了解,但是今天不能再讲了,太多了,大家都没有兴致看下去,明天继续.extjs的东西很庞大,但是还没有一个人用中文系统的分析写文章,所以资料都很可贵,现在我想做这件事,请大家多多支持,我才有动力.ExtJs2.0学习系列(5)--Ext.FormPanel之第二式3.可选的fieldset实例其实就是带个chechbox,有点像论坛注册时有一部分是选填信息的那种效果,主要知识点:●checkboxToggle:true//true则呈现一个带checkbox的fieldset,选中则展开,否则相反,默认为false●checkboxName:string//当上面为true时,作为checkbox的name,方便表单操作autoHeight:true,//使自适应展开排版items:[{fieldLabel:"UserName",name:"user",anchor:"95%"//330px-labelWidth剩下的宽度的95%,留下5%作为后面提到的验证错误提示},{fieldLabel:"PassWord",inputType:"password",//密码文本name:"pass",anchor:"95%"}]}4.表单验证实例(空验证,密码确认验证,email验证)我们可以用单独的js写表单验证,但是extjs已经为我们想到了(自己单独写反而不方便).在验证之前,我不得不提两个小知识点(大家在很多的extjs代码中都看到了这两个,他们都起提示作用的):●Ext.QuickTips.init(); //支持tips提示●Ext.form.Field.prototype.msgTarget='side';//提示的方式,枚举值为"qtip","title","under","side",id(元素id)//side方式用的较多,右边出现红色感叹号,鼠标上去出现错误提示,其他的我就不介绍了,可自行验证大家可以分别去掉这两行代码,看效果就会明白他们的作用,(放在onReady的function(){}中)✧我们看一个最简单的例子:空验证(其实这不算是一个专门的验证例子)//空验证的两个参数a)allowBlank:false//false则不能为空,默认为trueb)blankText:string//当为空时的错误提示信息js代码为:var form1 = new Ext.form.FormPanel({width:350,frame:true,renderTo:"form1",labelWidth:80,title:"FormPanel",bodyStyle:"padding:5px 5px 0",defaults:{width:150,xtype:"textfield",inputType:"password"},items:[{fieldLabel:"不能为空",allowBlank:false,//不允许为空blankText:"不能为空,请填写",//错误提示信息,默认为This field is required!id:"blanktest",anchor:"90%"}]});✧用vtype格式进行简单的验证.在此举验证的例子,重写上面代码的items配置:items:[{fieldLabel:"不能为空",vtype:"email", //email格式验证vtypeText:"不是有效的地址",//错误提示信息,默认值我就不说了id:"blanktest",anchor:"90%"}]你可以修改上面的vtype为以下的几种extjs的vtype默认支持的验证:●alpha //只能输入字母,无法输入其他(如数字,特殊符号等)●alphanum//只能输入字母和数字,无法输入其他●email//email验证,要求的格式是langsingmail.●url//url格式验证,要求的格式是.langsin.✧确认密码验证(高级自定义验证)前面的验证都是extjs已经提供的验证,我们也可以自定义验证函数,比上面要复杂点了.我们一起做一个密码确认的例子.我们修改前面的代码://先用Ext.apply方法添加自定义的password验证函数(也可以取其他的名字)Ext.apply(Ext.form.VTypes,{password:function(val,field){//val指这里的文本框值,field指这个文本框组件,大家要明白这个意思if(field.confirmTo){//confirmTo是我们自定义的配置参数,一般用来保存另外的组件的id值var pwd=Ext.get(field.confirmTo);//取得confirmTo的那个id的值return (val==pwd.getValue());}return true;}});//配置items参数items:[{fieldLabel:"密码",id:"pass1",anchor:"90%"},{fieldLabel:"确认密码",id:"pass2",vtype:"password",//自定义的验证类型vtypeText:"两次密码不一致!",confirmTo:"pass1",//要比较的另外一个的组件的idanchor:"90%"}]关于vtype的容还有很多容要挖掘,但现在我们就点到这里为止,以后有机会再讨论它的其他高级验证.ExtJs2.0学习系列(6)-- Ext.FormPanel之第三式(ComboBox篇)上篇ExtJs2.0学习系列(5)--Ext.FormPanel之第二式中我们讨论了下fieldset和表单验证的知识,今天我们接着深入解析表单元素中ComboBox组件的使用.会涉及到.net简单服务器数据交互,但暂不做深入讨论,以后会详细分析服务器交互相关,不过可能要等较长一段时间,呵呵!5.服务器数据作为ComboBox的数据源实例首先从服务器获取json数据://cs后台代码,要注意字符串格式(新手注意,下面的代码放在类里面,不是放在方法里)public String ServerData="['','','']";//aspx前台js介绍代码Ext.onReady(function(){var combo=new boBox({store:<%=ServerData%>,emptyText:'请选择一个省份....',applyTo: 'combo'});});<!-- aspx前台html代码 --><input type="text" id="combo" size="20"/>我们就通过<%=ServerData%>这样的方式获取到了服务器最简单的属性数据.问题来了,js和html怎么调用c#后台的变量和方法？(变量的调用上面刚刚介绍)6.js和html怎么调用c#后台的变量和方法a)js调用c#后台变量,参考上面,注意,如果想获取string类型,请在js里用引号 var str="<%=ServerData%>"(返回"['','','']")b)js调用c#后台方法:c)js调用c#后台带参数的方法boBox的数据源store格式详解在前面的例子里面,我们一直给ComboBox的数据源store赋值一维数组,其实store支持多维和Store.data.Store类型.下面就几种数据以代码举例说明一维数组:["",""],值同时赋给ComboBox的value和text二维和多维数组:[["one","bbar","111"],["two","tbar","222"]],第一维和第二维分别赋值给value和text,其他维忽略store类型:包括GroupingStore, JsonStore, SimpleStore.我们分三步走:这里我们介绍了两个新的参数displayField和mode,请记住,后面不再专门说明.boBox的value获取添加listeners事件:ComboBox的事件很多(api),我们无法一一讲解,但是我们可以举一反三,select事件就是其中典型的一个listeners:{"select":function(){alert(Ext.get("combo").dom.value); //获取id为combo的值}}这里我们提供了一种不是很好的方法,在此不做过多停留9.把Extjs的ComboBox样式应用到select的下拉框中去核心参数介绍transform:id//用于转换样式的,TimeField作为ComboBox的子类也有此属性核心代码://js代码var ExtSelect=new boBox({transform:"select",//html中的idwidth:80//宽度});<!-- html代码 --><select id="select"><option value="1">浪曦</option><option value="2">博客园</option><option value="3">百度</option><option value="4">新浪</option></select>boBox的其他重要参数a)valueField:"valuefield" //value值字段b)displayField:"field" //显示文本字段c)editable:false //false则不可编辑,默认为trued)triggerAction:"all"//请设置为"all",否则默认为"query"的情况下,你选择某个值后,再此下拉时,只出现匹配选项,如果设为"all"的话,每次下拉均显示全部选项e)hiddenName:string //真正提交时此combo的name,请一定要注意f)typeAhead:true, //延时查询,与下面的参数配合g)typeAheadDelay:3000, //默认250关于combobox的其他花俏功能在此不多做介绍.最后一点,如何实现在aspx页面更灵活的分离cs数据和js数据的交互？因为我们都喜欢把js放在一个单独的文件,然后在aspx页面引用这样就有一个问题,我在js里直接获取cs数据就有点不方便.我认为可以这样,在aspx页面里获取数据,并作为js,你就js变量,你就可以在js里引用了,或者直接通过url地址获取.之所以这么啰嗦的讲combobox,是因为这个东西有时候真的让人又爱又恨!下篇中我们继续讲解form中其他的表单元素!ExtJs2.0学习系列(7)--Ext.FormPanel之第四式(其他组件示例篇)11.checkbox简单示例效果图:js代码:Ext.onReady(function(){Ext.QuickTips.init();var myform=new Ext.FormPanel({frame:true,width:330,layout:"form",labelWidth:30,title:"checkbox简单示例",labelAlign:"left",renderTo:Ext.getBody(),items:[{xtype:"panel",layout:"column",//也可以是table,实现多列布局fieldLabel:'爱好',isFormField:true,//非常重要,否则panel默认不显示fieldLabelitems:[{columnWidth:.5,//宽度为50%xtype:"checkbox",boxLabel:"足球",//显示在复选框右边的文字name:""},{columnWidth:.5,xtype:"checkbox",boxLabel:"篮球",name:""}]}]});});关于多列布局,我们可以使用column或者table布局解决!a)checked:true//true则选中,默认为falseb)name:"**"//name值c)value:"" //初始化值,默认为undefine12.radio简单示例基本上和checkbox一样,不过注意一组单选框必须name值相同,才能单选.效果图:代码:Ext.onReady(function(){Ext.QuickTips.init();var myform=new Ext.FormPanel({frame:true,width:330,layout:"form",labelWidth:30,title:"radio简单示例",labelAlign:"left",renderTo:Ext.getBody(),items:[{xtype:"panel",layout:"column",fieldLabel:'性别',isFormField:true,items:[{columnWidth:.5,xtype:"radio",boxLabel:"男",name:"sex"//inputValue},{columnWidth:.5,checked:true,xtype:"radio",boxLabel:"女",name:"sex"}]}]});});13.htmleditor简单示例效果图:js代码:Ext.onReady(function(){Ext.QuickTips.init();var myform=new Ext.FormPanel({frame:true,width:600,layout:"form",labelWidth:50,title:"htmleditor简单示例",labelAlign:"top",//items中的标签的位置renderTo:Ext.getBody(),items:[{xtype:"htmleditor",id:"he",fieldLabel:"编辑器",anchor:"99%"}]});});在这里我啰嗦个参数:labelAlign:此参数是指form表单中items各项的label位置,默认值为left,枚举值有left,right,top 我看见过有朋友认为此参数指title的位置,是错误的!几个其他的参数:a)hideLabel:true//默认为false,还适用于有标签的所有表单组件//下面的一组参数控制编辑器的工具栏选项,都是默认值为trueb)enableColors:true//默认为true,显示字体颜色,字体背景颜色c)enableAlignments:true//左,中,右对齐d)enableFont:true//字体e)enableFontSize:false//字体大小,就是A旁边有个小箭头的f)enableFormat:false//粗体,斜体,下划线g)enableLinks:true//h)enableLists:true//列表i)enableSourceEdit:true//源代码编辑14.datefield简单示例效果图:js代码:Ext.onReady(function(){Ext.QuickTips.init();var myform=new Ext.FormPanel({frame:true,width:200,layout:"form",labelWidth:30,title:"dateditor简单示例",labelAlign:"left",renderTo:Ext.getBody(),items:[{xtype:"datefield",fieldLabel:"生日",anchor:"99%"}]});});15.timefield简单示例把上面的例子中datefield改为timefield,效果图:16.numberfield简单示例:把上面的datefield改为numberfield,就只能输入数字了17.triggerfield简单示例说明:它提供了一个触发的事件onTriggerClick,datefield和combox都是继承它效果图:(点击右边下拉按钮)js代码:Ext.onReady(function(){Ext.QuickTips.init();var myform=new Ext.FormPanel({frame:true,width:200,layout:"form",好了,关于form的几个基本组件我们都蜻蜓点水的看了一遍,相信大家感性上知道是怎么回事啦!(总算快写完了formpanel)前面有朋友说要做个一行多个控件,中间有文字的那种form布局,支持!下篇我们就做一个复杂点的form组件,还能提交服务器的综合示例!敬请期待!ExtJs2.0学习系列(8)--Ext.FormPanel之第五式(综合篇)在上篇和前面的介绍中,我们基本上对form表单中常见组件有了简单的认识,今天我们做个综合点的例子,向服务器提交下!其实这篇文章很简单,没有什么发光点,暂放首页半天,忘各位理解!先来个简单的例子,以说明formpanel如何把数据传给其他页面.效果图:现在我们要实现的效果是:点击确定,把值传到另一页面!,如下:原页面js代码为:Ext.onReady(function(){Ext.QuickTips.init();var form=new Ext.FormPanel({frame:true,width:300,//monitorValid:true,//绑定验证layout:"form",labelWidth:70,title:"添加个人信息",labelAlign:"left",renderTo:Ext.getBody(),submit: function(){this.getEl().dom.action = 'GetForm.aspx',this.getEl().dom.method='POST',this.getEl().dom.submit();},items:[{xtype:"textfield",fieldLabel:"用户名",//id:"UserName",allowBlank:false,blankText:"不能为空,请正确填写",name:"UserName",anchor:"90%"接受页面GetForm.aspx的cs代码为:因为很简单,我做个简要说明://几点说明1.首先定义submit参数的执行函数,即:2.为按钮添加触发相应的提交(取消)事件(这样就不是默认的ajax提交):3.如果你想绑定验证,在form表单添加参数monitorValid:true,然后在按钮配置参数中添加formBind:true,如buttons:[{text:"确定",handler:login,formBind:true},{text:"取消",handler:reset}]则只有所有的填写字段都满足条件时,"确定"方可提交!如下图,好了,一个简单的formpanel的提交的原理弄清楚啦!有关form提交数据的方法有多种,大家可以参考.17ext./showtopic-55.aspx(三种ext提交数据的方式), 下面我们来做个复杂点(只是样子)的form,示例一下(还是上面的原理)!效果图:传到GetForm.aspx页面后显示:不过在传过来的页面要记得ValidateRequest="false",安全编码我就暂且不讨论了! js代码:Ext.onReady(function(){Ext.QuickTips.init();var form=new Ext.FormPanel({frame:true,width:500,monitorValid:true,//把有formBind:true的按钮和验证绑定layout:"form",labelWidth:55,title:"添加个人信息",labelAlign:"right",renderTo:Ext.getBody(),submit: function(){this.getEl().dom.action = 'GetForm.aspx',this.getEl().dom.method='POST',this.getEl().dom.submit();},items:[{xtype:"panel",layout:"column",fieldLabel:"用户名",isFormField:true,items:[{columnWidth:.5,xtype:"textfield",allowBlank:false,blankText:"不能为空,请填写",name:"UserName",anchor:"90%"},{columnWidth:.20,layout:"form",labelWidth:40,labelAlign:"right",items:[{xtype:"radio",fieldLabel:"性别",boxLabel:"男",name:"Sex",checked:true,inputValue:"man",//这里如果用value,值是on,所以用inputValue(出现这种情况的是radio,checkbox)anchor:"95%"}]},{columnWidth:.30,layout:"form",labelWidth:1,//让标签宽度为很小的值(奇怪的是为0时反而不行)items:[{xtype:"radio",boxLabel:"女",labelSeparator:"",//去除分隔符”:”name:"Sex",inputValue:"woman",anchor:"95%"}]}]},{//上面是第一行xtype:"panel",layout:"column",fieldLabel:"出生日期",isFormField:true,items:[{columnWidth:.5,xtype:"datefield",name:"BirthDate",anchor:"90%"},{columnWidth:.5,layout:"form",labelWidth:40,//注意,这个参数在这里可以调整简单fieldLabel的布局位置items:[{xtype:"combo",name:"Degree",fieldLabel:"学位",store:["小学","初中","高中","专科","本科","硕士","博士"],emptyText:"请选择适合你的学历",anchor:"90%"}]}]},{ //上面是第二行xtype:"panel",layout:"column",isFormField:true,fieldLabel:"使用框架",items:[{columnWidth:.2,xtype:"checkbox",boxLabel:"",name:"SpringNet",inputValue:"spring"//这里如果用value,值是on,所以用inputValue },{columnWidth:.2,layout:"form",labelWidth:1,items:[{xtype:"checkbox",boxLabel:"Nhibernate",labelSeparator:"",name:"NHibernate",inputValue:"nhibernate",anchor:"95%"}]},{columnWidth:.6,layout:"form",labelWidth:1,items:[{xtype:"checkbox",boxLabel:"Linq",labelSeparator:"",name:"Linq",inputValue:"linq",anchor:"95%"}]}]},{ //上面是第三行xtype:"textfield",fieldLabel:"Email",name:"Email",vtype:"email",//email验证,如果想自定义验证的话,请参见前面的文章vtypeText:"email格式错误!",anchor:"56%"//控制文本框的长度},{ //上面是第四行xtype:"textarea",fieldLabel:"个性签名",name:"OneWord",height:50,anchor:"95%"},{ //上面是第五行xtype:"htmleditor",fieldLabel:"想说的话",name:"WantToSay",anchor:"95%",enableAlignments:false,//去除左右对齐工具栏enableLists:false//去除列表工具栏}],buttons:[{text:"确定",handler:login,formBind:true},{text:"取消",handler:reset}] });function login(){form.form.submit();}function reset(){form.form.reset();}});ExtJs2.0学习系列(9)--Ext.TabPanel之第一式照旧,看个最简单的先,后面再详细说复杂的!效果图片:js代码:Ext.onReady(function(){var tabsDemo=new Ext.TabPanel({renderTo:Ext.getBody(),width:300,activeTab:0,//当前激活标签frame:true,items:[{contentEl:"tabOne",//标签页的页面元素id(加入你想显示的话)title:"浪曦",closable:true//是否现实关闭按钮,默认为false},{contentEl:"tabTwo",title:"博客园兄弟们可好"}]});});html代码:<!-- html代码 --><body style="margin:10px;"><div><div id="tabOne" class="x-hide-display">i am tabOne!</div><div id="tabTwo" class="x-hide-display">i am tabTwo!</div></div></body><!--注意class类型,设为x-hide-display,以正常显示-->在这里例举几个参数:●tabPosition:"bottom"//选项卡的位置,枚举值bottom,top.默认为top(只有top的时候才能选项卡的滚动!)●tabTip:"提示"//必须先调用Ext.QuickTips.init();才有效果经常我们有这么个情况,一个选项卡加载一个页面,这里我提供一种不是很好但是很稳定的简单方法(已经在项目中验证没有出现问题).就是:使用iframe作为tab的标签页容.1.用iframe加载其他完整页面的tabpanel.效果图:。

序言ExtJS是一个很不错的Ajax框架，可以用来开发带有华丽外观的富客户端应用，使得我们的B/S应用更加具有活力及生命力。

ExtJS是一个用javascript编写，与后台技术无关的前端ajax框架。

因此，可以把ExtJS用在.Net、Java、Php等各种开发语言开发的应用中。

最近我们在几个应用都使用到了ExtJS，对公司以前开发的一个OA系统也正在使用ExtJS2.0进行改造，使得整个系统在用户体验上有了非常大的变化。

本教程记录了前段时间本人学习ExtJS的一些心得及小结，希望能帮助正在学习或准备学习ExtJS的朋友们快速走进ExtJS2.0的精彩世界。

教程包括ExtJS的新手入门、组件体系结构及使用、ExtJS中各控件的使用方法及示例应用等，是一个非常适合新手的ExtJS入门教程。

本教程主要是针对ExtJS2.0进行介绍，全部代码、截图等都是基于ExtJS2.0。

在学习了本教程后，可以下载这个基于ExtJS2.0开发的单用户Blog系统的源代码，这个系统是我们团队中的williamraym与大峡等人开发的一个演示系统，系统源码整体质量比较高，通过学习这套源代码相邻一定能提高您ExtJS的综合水平。

本教程比较适合ExtJS的新手作为入门教程及手册使用，并在我的博客/blog/lengyu/上进行发布；应一些朋友的要求，根据本教程的写作思路，我还编写了比本教程更为详细的《ExtJS实用开发指南》，包含详细的ExtJS框架使用方法、各个控件详细配置参数、属性、方法及事件介绍，与服务器端集成及一个完整的示例应用系统介绍等内容，适合想深入学习ExtJS或正在使用ExtJS进行开发朋友们使用。

该《指南》当前在作为VIP文档发布，供该站的VIP用户阅读及下载。

凡是购买了《ExtJS实用开发指南》文档的VIP用户，都可以在该指南印刷版出版后均会免费得到相应的印刷版本。

最后，希望广大网友把阅读本教程中的发现的错误、不足及建议等反馈给我们，让我们一起共同学习、共同进步，下面让我们一起进入精彩的ExtJS世界吧。

ExtExtjs js入门教程1.前言Ext是一款优秀的Ajax框架，目前已经出道了4.x版本。

可以用来开发带有华丽外观的胖客户端应用，使得我们的b/s应用更加具有活力及生命力，提高用户体验。

ExtJS 是一个用javascript编写，与后台技术无关的前端ajax框架。

因此，可以把Ext用在.Net、Java、Php等各种开发语言开发的应用中。

这次培训的目的：对Ext有一个大体的了解，并且掌握进一步学习的方法。

2.JS基础要学好Ext必须对JS有一定的了解。

2.1闭包所谓“闭包”，指的是一个拥有许多变量和绑定了这些变量的环境的表达式（通常是一个函数），因而这些变量也是该表达式的一部分。

我想用如何在Javascript中创建一个闭包来告诉你什么是闭包，因为跳过闭包的创建过程直接理解闭包的定义是非常困难的。

看下面这段代码：function a(){var i=0;function b(){alert(++i);}return b;}var c=a();c();这段代码有两个特点：1）函数b嵌套在函数a内部；2）函数a返回函数b。

这样在执行完var c=a()后，变量c实际上是指向了函数b，再执行c()后就会弹出一个窗口显示i的值(第一次为1)。

这段代码其实就创建了一个闭包，为什么？因为函数a外的变量c引用了函数a内的函数b，就是说：当函数a的内部函数b被函数a外的一个变量引用的时候，就创建了一个闭包。

闭包的应用场景：1)保护函数内的变量安全。

以最开始的例子为例，函数a中i只有函数b才能访问，而无法通过其他途径访问到，因此保护了i的安全性。

2)在内存中维持一个变量。

依然如前例，由于闭包，函数a中i的一直存在于内存中，因此每次执行c()，都会给i自加1。

以上两点是闭包最基本的应用场景，很多经典案例都源于此。

Ext中也存在许多这样的情况。

2.2对象简单的声明一个对象var Person={name:"刘德华","年龄":50,address:"中国"};var personObj=new Object();personObj.firstname="John";stname="Doe";personObj.age=50;personObj.eyecolor="blue";构造对象的方式有以下几种:1构造方式function User(){ername="zhangsan";//this.不能丢this.say=function(){//this.不能丢alert("username:"+ername);//this.不能丢}//下面注释的这种写法不对//function say(){//alert("username:"+ername);//}}var user=new User();ername="lisi";user.say();//username:lisivar user1=new User();user1.say();//username:zhangsan,不受user对象的影响//多个实例对象不共享类的属性值，如下:function User(){ername=new Array();//this.不能丢this.say=function(){//this.不能丢alert("username:"+ername);//this.不能丢}}var user=new User();ername.push("zhangsan");user.say();//username:zhangsanvar user1=new User();user1.say();//user1的username为空，不为zhangsan,因为user1的属性值不受user影响优点:多个实例对象不共享类的属性值，缺点:每个实例对象都会产生出一个函数say。