下载文档原格式
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支持将数据与组件进行绑定，以实现动态数据的展示和交互。
通过设置数据模型和绑定关系，可以在数据更新时自动更新组件的显示内容。
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 查询器等基础的功能。
Ext JS 4类系统在历史上第一次，Ext JS的经历了一个在基础上的巨大重构，这就是新的类系统。
新架构的基础几乎每一个都是建立在Ext JS4.x写单个类上，因此在开始编码之前理解这个类系统是很重要的。
本手册适用于任何希望创造新的或扩大在现有的Ext JS 4.x类的开发者。
它分为4个部分：∙第一节：“概述”解释为什么需要一个强大的类系统∙第二节：“命名约定”讨论命名类，方法，属性，变量和文件的最佳做法。
∙第三节：“实践”提供了详细的一步一步的代码示例∙第四节：“错误的处理和调试”提供有用的提示和技巧，如何处理异常1概述Ext JS4有300多个类。
我们有超过20万开发者的巨大社区，他们来自世界各地，有各种编程背景。
在这种规模的框架中，我们面对的一个巨大挑战就是提供一个共同的代码架构。
这个架构要求：∙熟悉和简单易学∙能快速开发，调试方便，无痛部署∙精心组织，可扩展性和可维护性JavaScript是一个没有类的，原型为导向（prototype-oriented）的语言。
因此，JavaScript语言本质上最强大的功能之一是灵活性。
它可以使用许多不同的编码风格和技巧，以许多不同的方式做同样的工作。
然而，该功能也是不可预知的成本。
如果没有一个统一的结构，JavaScript代码会真的很难理解，维护和再利用。
另一方面，基于类（Class-based）编程，仍然停留OOP的最流行的模式。
基于类的语言，通常需要强类型，提供封装，标准的编码约定。
通常使得开发者坚持一个大原则，编写的代码更可能是可预见的、可延伸和可扩展的。
然而，他们却不具有JavaScript这样的语言的动态能力。
每种方法都有其自身的利弊，我们能否对各方都去其糟粕，取其精华？答案是肯定的，我们已经在Ext JS 4的解决方案中实现了。
2命名约定使用一致的命名约定作为所有类的代码基础，而命名空间和文件名有助于保持你的代码的组织，结构化和可读性。
ExtJS 实用简明教程[收集整理:龚辟愚、QQ 群：19274175]序言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的基本功能。
如果你对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开发步骤说明一. 准备工作：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。
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介绍组件大致可以分成三大类，即基本组件、工具栏组件、表单及元素组件。
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.效果图:。
第 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 返回的状态一直是失败，也无法获得任何数据，所有就看不到正确的效果。
第三章表单在这章里，我们将学习Ext表单(forms)。
它和HTML的表单相似，但却没有约束和枯燥的界面。
我们用不同的表单字段类型来生成一个表单，而且它的验证和提交过程是异步的。
然后我们会制作数据库驱动的下拉菜单，即ComboBox，然后添加复杂的字段验证和mask（相当于一种掩码）。
然后我们再进行进一步的改进，为其添加一系列的令人啧啧的功能。
本章的目的包括：∙制作一个靠AJAX提交的表格；∙检验字段数据并建立常用验证；∙从数据库中加载表格。
表单的主要组件：Ext的表单蕴含了无穷无尽的可能。
按键监听、检验、错误信息、输入约束都在配置项里有支持。
扩展表单的配置以达到你的需要是十分容易的，这在本章中会做相应介绍。
接下来介绍一些表单的核心组件：∙Ext.form.FormPanel：有点像传统HTML的表单，它是一个结合了很多字段的面板；∙Ext.form.Field：他是表单中主要的元素，用来和用户交互，也是很多字段的基础，可以拿它和HTML中的INPUT标签来做类比。
我们的第一个表单：为了开始，让我们先做一个集合了各种字段类型的表单：一个日期选择器、校验、错误信息和AJAX提交——放心，对于我们第一尝试来讲，这个表单并不复杂。
在这个示例里，我们通过配置对象来建立字段，而不是通过去实例化一个Ext.form.Field组件。
这种方法很好，可以节约很多时间，也能让代码运行更快。
前面示例中饿HTML页面可以做本示例的开始（你可以免去很多引入Ext库的工作）。
Ext 库文件一定要被正确引入，Ext的代码要放在onReady函数中。
Ext.onReady(function(){var movie_form = new Ext.FormPanel({url: 'movie-form-submit.php',renderTo: document.body,frame: true,title: 'Movie Information Form',width: 250,items: [{xtype: 'textfield',fieldLabel: 'Title',name: 'title'},{xtype: 'textfield',fieldLabel: 'Director',name: 'director'},{xtype: 'datefield',fieldLabel: 'Released',name: 'released'}]});});当我们在浏览器中运行上面的代码，会出现一个如下的表单面板：好表单——它是怎么工作的？这个FormPanel和HTML表单很相似。
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。
第四章按钮、菜单和工具栏那些每个程序中的幕后英雄都是最简单的东西，如按钮、菜单和工具栏。
在这章里，我们将学习如何把它们添加到自己的应用里。
我们的示例将会包含一些不同种类的按钮，有的有菜单，有的没有菜单。
一个按钮外观上看可以是一个图标或者一段文本又或者两者兼而有之。
工具栏里可以包含一些机械元素，如空格和分隔符，用来组织工具栏中的按钮。
我们还会介绍如何让这些元素对用户的交互做出反应。
适应各种场合的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中。
