ExtJS入门教程(超级详细)
ExtJs4.0入门教程
ExtJS简介
ExtJS显示效果示例1
ExtJS简介
ExtJS显示效果示例2
ExtJS简介
认识ExtJS的开发包
要开始ExtJS之旅的第一步是要获得开发包，可以 从官方网站/下载。下载 地址是 /products/extjs/downloa d
•
ExtJS组件之Panel
•
控件
控件(widgets)：控件是指可以直接在页面中创建 的可视化组件，比如面板、选项板、表格、树、 窗口、菜单、工具栏、按钮等等，在我们的应用 程序中可以直接通过应用这些控件来实现友好、 交互性强的应用程序的UI。
ExtJS基础组件
•
组件分类举例
容器组件：如toolbar、pagingtoolbar、panel、 form、menu、treePanel、gridPanel、window等。 工具栏及菜单栏组件：如tbseparator（工具栏分 隔符）、menuitem（菜单项）等。 表单及元素组件：如checkboxfield（复选框）、 combo(下拉列表)、datefield（日期选择项）等。 其他组件（包括图表、视图、编辑、按钮组件）： 如chart、button。
• • • • •
• •
ExtJS简介
ExtJS API文档
ExtJS简介
•
从Hello World开始
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <link rel='stylesheet' type='text/css' href='./ext/resources/css/ext-all.css'> <script type="text/javascript" src="./ext/bootstrap.js"></script> <script type="text/javascript"> Ext.onReady(function(){ Ext.MessageBox.alert('helloWorld',"I'm coming"); }); </script> </head> <body> </body> </html>
ExtJS培训进阶教程
ExtJS培训进阶教程软件确实是服务名目1什么是ExtJs (3)2ExtJs的使用 (3)2.1猎取ExtJs (3)2.2应用Extjs (3)2.3演示HelloWorld (4)3get,getDOM,getCmp (4)3.1getDom方法 (4)3.2get方法 (5)3.3getCmp方法 (5)4事件 (8)5ExtJs所包含组件 (9)5.1ExtJS组件分类 (9)6ExtJs常用组件介绍 (11)6.1Panel组件 (11)6.1.1panel例如 (11)6.1.2panel的布局 (12)6.1.3panel属性简介 (14)6.2ViewPort组件 (15)6.3表格控件及其内部属性 (17)6.3.1简单的Grid (17)6.3.2Grid的功能详解 (19)6.4按钮 (27)7Ext.Ajax.request (28)8Ext同步/异步要求 (29)1什么是ExtJsExtJs是能够用来开发带有华丽外观的富客户端应用，使得我们的b/s应用更加具有活力及生命力，提高用户体验。
ExtJs是一个用javascript编写，与后台技术无关的前端ajax框架。
因此，能够把ExtJs用在.Net、Java、Php等各种开发语言开发的应用中。
2ExtJs的使用2.1猎取ExtJs猎取ExtJs://extjs .cn/download公司使用ExtJs版本为2.02.2应用Extjs应用extjs需要在页面中引入extjs的样式及extjs库文件，样式文件为resources/css/ext-all.css，extjs的js库文件要紧包含两个，adapter/ext/ext-base.js 及ext-all.js(ext/build/locale/ext-lang-zh_CN.js)，其中ext-base.js表示框架基础库，ext-all.js是extjs的核心库。
extJS4.x中文API学习教程
Extjs4 学习指南（仅供学习使用、转载需注明出处）Extjs4可用的学习资料少之又少，本文内容大部分为网络整理、方便学习者使用，如有出入以extjs4 api文档为准。
Extjs初步获取Extjs下载extjs：可以从/ 获得需要的extjs发布包及更多支持。
搭建学习环境：假设您的机器已经安装myeclipse和tomcat，如果没有请参阅其他相关资料。
myeclipse建立新Web project项目Extjs4并且将extjs4.0.7压缩包解压后的全部文件复制到项目的Webroot目录下Examples目录为ext官方提供的例子程序，其中可能包涵php的代码，错误信息可以暂时不理会。
部署并且启动tomcat，测试环境是否可用。
打开浏览器，输入http://localhost:8080/Ext4/index.html假设您的tomcat端口为8080您会看到以下界面，证明环境已经搭建成功！查看api文档http://localhost:8080/Ext4/docs/index.html查看示例页面http://localhost:8080/Ext4/examples/index.html 测试例子开始...Html文件中只引入了一个css和2个js文件，注意引用路径和你建立文件路径是否能匹配，如果路径没有问题的话，打开浏览器输入http://localhost:8080/Ext4/helloworld.html您将会看到浏览器里显示一个panel，标题是Hello Ext,内容Hello! Welcome to Ext JS.，如果没有，请查看是否有路径不匹配。
其他：在ExtJS里最常用的,应该就是Ext.onReady和Ext.application这两个个方法了,而且它也可能是你学习ExtJS所接触的第一个方法,这个方法在当前的DOM加载完毕后自动调用,保证页面内的所有元素都能被Script所引用.可以尝试在这个方法中添加一条语句,看看页面打开后是什么反映（先建立js和html文件，将如下代码加入js文件中，html文件相应引入对应的js文件，本获取元素还有一个常用的方法,就是获取页面上的元素了,ExtJS提供了一个get方法,可以根据ID取到页面上的元素:var myDiv = Ext.get('myDiv');会取到页面上ID为'myDiv'的元素.如果使用Element.dom的方法,则可以直接操作底层的DOM节点,Ext.get返回的则是一个Element对象.在不能使用这种方式来获取多个DOM的节点,或是要获取一些ID不一致,但又有相同特征的时候,可以通过选择器来进行获取,比如要获取页面上所有的标签,则可以使用:var ps = Ext.select('p');这样你就可以对所要获取的元素进行操作了,select()方法返回的是positeElement对上,如:ps.highlight();或是:Ext.select('p').highlight();当然,select参数还可以更复杂一些,其中可以包括W3C Css3Dom选取器,基本的XPath,HTML 属性等,详细情况,可以查看DomQuery API的文档,来了解细节.事件响应获取到了元素,则可能会对一些元素的事件进行一些处理,比如获取一个按钮,我们为它添加一个单击事件的响应:当然,你可以把事件的响应加到通过select()方法获取到的元素上:});WidgetsExtJS还提供了丰富的UI库来供大家使用.Extjs4布局详解Fit布局在Fit布局中，子元素将自动填满整个父容器。
extJS4x中文API学习教程
Html 文件中只引入了一个 css和 2 个 js 文件， 注意引用路径和你建立文件路径是否能匹配， 如果路径没有问题的话，打开浏览器输入
http://localhost:8080/Ext4/helloworld.html 您将会看到浏览器里显示一个 panel，标题是 Hello
Ext,内容 Hello! Welcome to Ext JS. ，如果没有，请查看是否有路径不匹配。 其他：
,打印出 'hello world!' 字样 .
获取元素Biblioteka 还有一个常用的方法 ,就是获取页面上的元素了 ,ExtJS 提供了一个 get 方法 ,可以根据 ID 取到
页面上的元素 :
var myDiv = Ext.get('myDiv'); 会取到页面上 ID 为 'myDiv' 的元素 .如果使用 Element.dom 的方法 ,则可以直接操作底层的
,看看页面打开后
（先建立 js 和 html 文件，将如下代码加入 js 文件中， html 文件相应引入对应的 js 文件， 本 文档所有示例代码均如此方式运行以下不再重复）
Ext.onReady(function() { alert('hello world!'); }); 上面的代码将在页面加载完毕后弹出一对话框
无效的。如果在 fit 布局中放置了多个组件，则只会显示第一个子元素。典型的案例就是当 客户要求一个 window 或 panel 中放置一个 GRID 组件， grid 组件的大小会随着父容器的大
小改变而改变。 示例代码：
Ext.application({ name: 'HelloExt', launch: function() {
ExtJS快速入门指南
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(入门篇10)UsingViewsinyourApplications
Using Views in your Applications本系列文章为翻译文章，翻译自API文档，也是入门级别的文章，请初学者仔细阅读，如果翻译有不妥的地方，请谅解，如果转载请注明作者及出处。
从用户的角度看，我们的应用程序只不过是视图的集合。
尽管大多有价值的部分都在控制器和模型中，但是视图却是和用户直接交互的。
在本指导文档中，将就如何构建我们应用程序的视图展开叙述。
Using Existing Components最简单的方式就是使用Ext.create函数来创建一个已经定义好的组件。
例如我们可以创建一个特别简单的panel，仅仅包括一些html内容：该代码十分简单，只是创建一个全屏的组件，里面包含了一些文字内容。
我们可以使用该方法创建任意的内在组件，但是比较实用的方法是，我们创建该组件的子类，以便实现我们自定义：虽然看起来，结果是相同的，但是我们有了一个我们自己的类，这就是我们需要遵循的模式—创建已有组件的子类，在我们需要的时候再对它进行实例化。
让我们看看这都有些什么变化：1.Ext.define函数允许我们创建一个新的类，继承我们已经存在的类。
2.我们遵循MyApp.view.MyView的命名规则，尽管我们可以任意命名，但是最好还是遵循我们的规则，方便以后管理以及程序的简单明了。
3.我们可以再config中定义新的配置项。
我们在定义我们的全新子类的时候，可以使用超类的配置项进行配置，或者在创建的时候，把该类的配置项作为参数传递进去，以便创建：A Real World Example下面我们来看一个比较规范的视图类文件，是Twitter中的文件：该类的定义，遵循了上面我们说的模式。
我们定义了我们自己的类Twitter.view.SearchBar，继承自框架中的Ext.Toolbar。
我们在定义的时候，使用了许多的配置项，例如布局和子项数组。
该代码中使用了两个比较重要的选项：requires：因为我们在子项数组中使用了一个searchfield，那么我们就需要使用requires 来手动定义依赖关系，让系统为我们使用searchfield加载Ext.field.Search类。
ExtJs使用总结（非常详细）
ExtJs使用总结（非常详细）一、获取元素（Getting Elements）1.Ext.getvar el = Ext.get('myElementId');//获取元素，等同于document.getElementById('myElementId');//会缓存2. Ext.flyvar el = Ext.fly('myElementId')//不需要缓存。
注：享元模式（Flyweight Design Pattern）是一种节省内存的模式，该模式的大概原理是建立单个全体对象然后不断反复使用它。
3.Ext.getDomvar elDom = Ext.getDom('elId'); // 依据id来查dom节点var elDom1 = Ext.getDom(elDom); // 依据dom节点来查dom 节点二、CSS元素4.addClassExt.fly('elId').addClass('myCls'); // 加入元素的'myCls'的样式5.radioClassExt.fly('elId').radioClass('myCls');//添加一个或多个className 到这个元素，并移除其所有侧边（siblings）节点上的同名样式。
6.removeClassExt.fly('elId').removeClass('myCls'); // 移除元素的样式7.toggleClassExt.fly('elId').toggleClass('myCls'); // 加入样式Ext.fly('elId').toggleClass('myCls'); // 移除样式Ext.fly('elId').toggleClass('myCls'); // 再加入样式8.hasClassif (Ext.fly('elId').hasClass('myCls')) {//判断是否已加上这个样式// 是有样式的……}10.replaceClassExt.fly('elId').replaceClass('myClsA', 'myClsB');//替换样式11.getStylevar color = Ext.fly('elId').getStyle('color');//返回该元素的统一化当前样式和计算样式。
Extjs教程_第一章_起步
第一章起步在这章里，我们将介绍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入门
入门环境要求浏览器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是否定义。
EXT_JS入门详解_x
- 1 -序言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 用户，都可以在该指南印刷版出版后均会免费得到相应的印刷版本。
ext入门手册
ext入门手册Ext JS 学习笔记目录1开始EXTJS (1)1.1获取EXTJS (1)1.2应用EXTJS (1)1.3演示H ELLO W ORD (2)2组件的介绍和应用 (3)2.1介绍 (3)2.2应用 (5)2.2.1简单示例 (5)2.3组件详解 (7)2.3.1EXT.Panel (7)2.3.2布局控件 (9)2.3.3表格控件 (13)2.3.4树形控件 (15)2.3.5表单控件Form (19)2.3.6弹出窗口 (22)3EXT核心 (28)3.1E XT.E LEMENT (28)3.2CSS样式操作 (30)3.1DOM操作 (31)3.1A JAX介绍 (36)1开始extjs1.1获取extjs要使用ExtJS，那么首先要得到ExtJS库文件，该框架是一个开源的，可以直接从官方网站下载，网址/doc/3d9942416.html/download，把下载得到的ZIP压缩文件解压可以看到如下目录和文件1.2应用extjs应用extjs需要在页面中引入extjs的样式及extjs库文件，样式文件为resources/css/ext-all.css，extjs的js库文件主要包含两个，adapter/ext/ext-base.js及ext-all.js，其中ext-base.js表示框架基础库，ext-all.js是extjs的核心库。
因此，要使用ExtJS框架的页面中一般包括下面几句：<="" bdsfid="99" p="" rel="stylesheet" type="text/css"/> href="extjs/resources/css/ext-all.css" />在ExtJS库文件及页面内容加载完后，ExtJS会执行Ext.onReady 中指定的函数，因此可以用，一般情况下每一个用户的ExtJS应用都是从Ext.onReady开始的，使用ExtJS应用程序的代码大致如下：fn也可以写成一个匿名函数的形式，因此上面的代码可以改成下面的形式：1.3演示HelloWord<="" bdsfid="123" p="" rel="stylesheet" type="text/css"/> href="extjs/resources/css/ext-all.css" />2组件的介绍和应用2.1介绍组件大致可以分成三大类，即基本组件、工具栏组件、表单及元素组件。
ExtJs入门详细的介绍版
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教程
第 1 章闪烁吧！看看extjs 那些美丽的例子。
第 1 章闪烁吧！看看extjs 那些美丽的例子。
1.1. 一切从extjs 发布包开始非常幸运的是，我们可以免费去 下载ext 发布包，里边源代码，api 文档，例子一应俱全。
不过要是想访问svn 获得最新的代码，就要花钱了。
不过我们现阶段只要这个免费的发布包就可以了，通过里边的范例，可以让我们体验一下ext 的风范。
下载地址：/download。
到写文档的此时此刻，咱们可以选择ext-1.1.1 或者是ext-2.0 下载。
明显可以看出来ext-2.0 的版本高，12 月4 日终于正式发布了，尚未经过详细测试，所以不敢说什么。
下面我们把两个版本都介绍一点儿。
1.2. 看看ext-1.1.1 的文档docs 目录下是api 文档，基本上所有的函数，配置，事件都可以在里边找到，直接打开index.html 就可以查看，左侧菜单还包含了对examples 目录下例子的引用，不过有些例子需要使用json 与后台做数据交换，必须放到服务器上才能看到效果。
还有一些后台代码是使用php 编写的，如果想看这些例子的效果，还需要配置php 运行环境。
如果你用java，而且jdk 在1.5 以上，不如直接装个resin-3 方便，它可以跑php 呢。
1.3. 看看ext-2.0 的文档api 文档依然在docs 目录下，虽然可以看到左边的菜单，但是点击之后，右侧的api 页面都是靠ajax 获得的，所以不能直接在本地查看了，你必须把整个解压缩后的目录放到服务器上，通过浏览器访问服务器，才能看到。
问为什么docs 打不开，只能看到一直loading 的兄弟，都是因为没把这些东西放到服务器上的原因。
2.0 中的api 文档中没有例子的链接了，你需要自己去examples 目录下找你需要的例子，然后打开看，当然还是有一些例子需要放在服务器上才能看到效果。
1.4. 为什么有的例子必须放在服务器上才能看到效果？因为有些例子里，用到Ajax 去后台读取数据，如果没在服务器上，Ajax 返回的状态一直是失败，也无法获得任何数据，所有就看不到正确的效果。
Extjs基础r教程
目实时录1文档说明 (2)2词汇定义和图片： (2)Extjs ：XXXX (2)可以贴图说明结构（可选）......................................................... 错误！未定义书签。
3章节1 .................................................................................. 错误！未定义书签。
3.1 小章节： (14)3.2 小章节.................................................................................. 错误！未定义书签。
A.子章节........................................................................................ 错误！未定义书签。
B.子章节........................................................................................ 错误！未定义书签。
1文档说明本文档是针对Extjs的基础教程,主要内容为Extjs的概述及Extjs各种常用控件的使用. 更适用于初学Extjs时使用。
2词汇定义和图片：Extjs ：基于html/css+javascript的Ajax框架，主要用于创建前端用户界面。
Extjs是一个跨浏览器的应用,RIA(Rich Internet Applications)：富互联网应用，具有高度互动性、丰富用户体验以及功能强大的客户端。
MVC：(Model View Controller)即把一个应用的输入、处理、输出流程按照Model、View、Controller的方式进行分离，这样一个应用被分成三个层——模型层、视图层、控制层Ext的适配器：Ext成型于YahooUI的Javascript库的扩展。
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。
Extjs教程_第四章_按钮、菜单和工具栏
第四章按钮、菜单和工具栏那些每个程序中的幕后英雄都是最简单的东西，如按钮、菜单和工具栏。
在这章里，我们将学习如何把它们添加到自己的应用里。
我们的示例将会包含一些不同种类的按钮，有的有菜单，有的没有菜单。
一个按钮外观上看可以是一个图标或者一段文本又或者两者兼而有之。
工具栏里可以包含一些机械元素，如空格和分隔符，用来组织工具栏中的按钮。
我们还会介绍如何让这些元素对用户的交互做出反应。
适应各种场合的toolbar（工具栏）：几乎所有的Ext组件——面板、窗口、表格都可以容纳一个顶部或者底部的toolbar。
Ext使得toolbar在渲染时添加到任何DOM元素中。
toolbar是一个非常灵活有用的组件，可以在任何应用中使用。
•Ext.Toolbar：按钮的主要容器；•Ext.Button：建立一个按钮并提供交互功能；•Ext.menu：一个菜单。
Toolbars(工具栏)：我们的第一个工具栏将独立渲染在页面中。
我们将分别添加一些主要的按钮类型，然后做分别的研究：•Button——tbbutton：这是我们都熟悉的默认的按钮类型；•Split Button——tbsplit：split button中包含了一个可选菜单并提供默认的按钮动作。
这种按钮被用在为按钮添加多个可选项的时候。
当然，显示给用户的是最常用的默认选项；•Menu——tbbutton+menu：Menu（菜单）其实就是一个用菜单配置项来配置的按钮。
Ext.onReady(function(){new Ext.Toolbar({renderTo: document.body,items: [{xtype: 'tbbutton',text: 'Button'},{xtype: 'tbbutton',text: 'Menu Button',menu: [{text: 'Better'},{text: 'Good'},{text: 'Best'}]},{xtype: 'tbsplit',text: 'Split Button',menu: [{text: 'Item One'},{text: 'Item Two'},{text: 'Item Three'}]}]});});像之前一样，所有的东西都包含在onReady中。
ExtJs基础教程 extjs经典教程 extjs笔记
ExtJs学习笔记目录1.ExtJs 结构树 (2)2.对ExtJs的态度 (3)3.Ext.form概述 (4)4.Ext.T abPanel篇 (5)5.Function扩展篇 (7)6.Ext.data.Store篇 (10)7.Ext.data.JsonReader篇一 (12)8.Ext.data.JsonReader篇二 (15)9.Ext.data.HttpProxy篇 (19)10.Ext.data.Connection篇一 (20)11.Ext.data.Connection篇二 (24)12.Ext.Updater篇一 (26)13.Ext.Updater篇二 (27)14.JSON序列化篇 (33)15.通信篇 (35)16.extJs 2.0学习笔记(Ajax篇) (38)17.extJs 2.0学习笔记(Ext.data序论篇) (39)18.extJs 2.0学习笔记(Ext.Panel终结篇) (40)19.extJs 2.0学习笔记(事件注册总结篇) (45)20.extJs 2.0学习笔记(Ext.Panel篇一) (48)21.extJs 2.0学习笔记(Ext.Panel篇二) (50)22.extJs 2.0学习笔记(Ext.Panel篇三) (59)23.extJs 2.0学习笔记(Ext.Panel篇四) (62)24.extJs 2.0学习笔记(组件总论篇) (66)25.extJs 2.0学习笔记(Ext.Element API总结) (69)26.extJs 2.0学习笔记(Element.js篇) (73)27.extJs 2.0学习笔记(DomHelper.js篇) (76)28.extJs 2.0学习笔记(ext.js篇) (77)1. ExtJs 结构树2. 对ExtJs的态度extjs的确是个好东西，但是，它的优点也就是它的缺点：∙加载页面慢∙时间一长，浏览器占内存就会疯长∙服务器端功能极度削弱，除了数据库操作外，几乎所有功能都到了客户端，还得用javascript来写。
ExtJs 教程
ExtJs2.0学习系列(1)--Ext.MessageBox发布时间：2008-8-7大家都知道，刚开始搞extjs的时候，很是有点困难，所以本人在新手刚入门后准备了这个系列的文章。
个人认为用extjs做后台很不错，布局比较完美！1.Ext.MessageBox.alert()方法有四个参数，为简单起见，主要介绍前面三个参数：alert( title , msg , function(){} )其中title，msg为必选参数，function为可选参数，在关闭弹出窗口后触发。
Ext.MessageBox.alert("title","msg");Ext.MessageBox.alert("title","msg",function(){alert("关闭对话框后弹出！")});2.Ext.MessageBox.confirm()方法基本上同alert()方法一模一样。
注意这点：Ext.MessageBox.confirm("title","msg",function(e){alert(e);});这个参数e是什么？它是你点击的弹出框的按钮的值，三种值：yes,no,cancel.Alert()方法也是如此，不过只有两种值：ok，cancel.3.Ext.MessageBox.prompt()方法有六个参数，比前面alert方法多一个返回值和是否多行。
Ext.MessageBox.prompt("title","msg");Ext.MessageBox.prompt("title","msg",function(e,text){alert(e+"-"+text );});//输入"qianxudetianxia",点击ok按钮，弹出ok-qianxudetianxiaExt.MessageBox.prompt("title","msg",function(e,text){alert(e+"-"+text );},this,true);//true为多行，this表示作用域4.Ext.MessageBox.show()方法功能很强大，采用config配置形式，比前面的方法使用更方便。