下载文档原格式
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的核心库。
EXT学习文档ext-1.1部分原创/部分整理第一章 EXT入门1.1 Ext简介Ext在最开始的时候，是作为YUI的一个扩展存在的，所以那个时候它的名称是YUI.Ext，后来，Ext作为一个独立的项目进行开发，并不再依赖于YUI。
适合企业级开发，能实现复杂的Layout布局，界面效果可以和backbase媲美，而且使用纯javascript代码开发。
真正的可编辑的表格Edit Grid，支持XML和Json数据类型，直接可以迁入grid，有完整地说明文档。
1.2 下载Ext如果你未曾下载过，那应从这里下载最新版本的Ext /downloads。
针对你的下载需求，有几个不同的版本。
通常地，最稳定的版本，是较多人的选择。
最新的版本是Ext2.0，本教程使用ext-1.1版本。
下载解包后，我们可以查阅ext目录下的docs中的文档配合example下是些实例文件进行学习。
在EXT目录中，package目录是ext所有类库文件,在ext-all.js文件中已经包含了该目录下所有的类。
因此我们开发中只需要导入ext-all.js文件即可。
Resources目录下有Ext所需要的图片文件和CSS样式文件。
对于样式文件我们只用到ext-all.css一个文件即可，它包含了所有Ext中样式的定义。
在样式文件夹中还有三个Ext主题样式文细讲到。
1.3 第一个例子我们开始第一个例子，可以帮助你了解Ext的开发。
（1）首先我们建立项目目录，如C:\example1。
（2）在example1目录下建立js和css两个目录，用于存放JS文件和CSS样式文件。
（3）为了节省空间我们只把需要的文件拷贝到项目中：将EXT目录中resources\css\目录下的ext-all.css、xtheme-aero.css、xtheme-gray.css、xtheme-vista.css 文件拷贝到项目中CSS目录下。
将EXT目录中ext-all.js文件和adapter\ext\ext-base.js文件拷贝到项目中JS目录下。
ExtJS—表单与输入控件表单在EXT中非常受欢迎，初看这些输入控件，好像只是修改了CSS样式而已，但是如果用Firebug查看一下DOM，似乎确实只有CSS发生了变化，隐藏在漂亮界面下的依然是原来的input控件，如果你想使用EXT提供的一些绚丽的功能，建议尝试EXT的表单(Form)和对应的输入控件。
本文就是简单介绍表单与输入控件的使用方法。
一、创建一个简单的表单1、具体配置信息参考上篇文章2、创建简单表单的实现代码如下所示：view plaincopy to clipboardprint?1.<mce:script type="text/javascript"><!--2.Ext.onReady(function(){3.var form=new Ext.form.FormPanel({4.defaultType:'textfield',belAlign:'right',6.title:'form',belWidth:50,8.frame:true,9.width:220,10.items:[{11.fieldLabel:' 文本框'12.}],13.buttons:[{14.text:'按钮'15.}]16.});17.form.render("div1");18.});19.20.// --></mce:script>3、注意HTML中无需定义太多东西，只需要定义个div id='div1'就可以实现，初始配置显然变得更紧凑，利用items和buttons指定包含的控件和按钮。
具体实现效果如图1所示。
图1 简单的表单二、FormPanel和BasicForm详解如上面的实例所示，我们需要定义一个Ext.form.FormPanel,然后在里面设置field,引入Ext.form.For mPanel 的最大好处就是利于布局，Ext.form.FormPanel继承了Ext.Panel,作为一个Panel,我们可以把Ext.form.FormPanel放到Ext.Viewport中作为整个页面布局的一部分，同时也可以利用items指定Ext.form.FormPanel内部的子组件。
这一个别指导最与相关？Ext 设计者，1. x。
Ext 设计者是作什么的？和设计者建筑网络应用UI和设计者展开UI 成份对数据连接输出一个计画Ext 设计者是作什么的？设计者为Ext JS 网络申请是图解式使用者接口建立者。
它的简单易用累赘和下降环境促使你很快地设计原型你的申请接口成份，把接口成份连结到你的数据，而且为每个成份输出很好形成、物体导向的密码。
程序师和非程序师一样能使用设计者在帮助使更快速地被开始而且使较快速的重复成为可能的计画的申请设计上合作。
与设计者在一起，你能：很快地而且容易地建立复杂的表格。
变化成份地面区划和以货易货控制用钮扣的点击的类型。
关于写落实密码、，而非样板文件UI 密码的焦点。
另外数据对于关于设计者和Ext JS 的较多资讯：看这？设计者示范？对于对设计者的快介绍。
对于关于的资讯最近的设计者释放和更新，见到这？设计者Changelog。
如果你对Ext JS 很新，见到成份和容器模型数据在这？Ext JS 概观。
为关于任何Ext JS 班级或方法的细节，见到这？Ext JS 美国石油协会叁考。
和设计者建筑网络应用UI设计者被设计连同你的现有发展环境和工具被用。
它不是日蚀或你的喜爱本文编者的一个替换。
被设计者产生的密码能进入你的现有IDE 之内被进口，而且你能在你的IDE 之内的设计者的外面或与你的选择的编者编辑UI 落实文件。
当使用设计者，你：在设计者帆布上展开你的UI 成份。
配置成份。
连接到你的数据商店。
输出你的计画。
实现你的事件处理和习惯方法在这产生。
js 申请。
重要的！？当你第一次输出你的计画，两个Javascript 文件为你的计画的每个最高阶层的成份被产生。
文件与这。
ui.js 延长为UI 成份包含恶劣的班级。
你在文件中扩充这一个基础班级与这。
js 延长实现你的事件操作者和订制的功能。
不要修正这。
ui.js 文件直接地，每当你修正并且输出你的计画，它将会重写。
序言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世界吧。
如有你有帮助，请购买下载，谢谢！《ExtJS2.0 实用简明教程》之可编辑表格 EditorGridPanel可编辑表格是指可以直接在表格的单元格对表格的数据进行编辑，ExtJS 中的可编辑表格由类，xtype 为 editorgrid。
使用 EditorGridPanel 与使用普通的 GridPanel 方式一样，区别只是在定义列信息的时候，可 以指定某一列使用的编辑即可，下面来看一个简单的示例。
Ext.onReady(function(){ var data=[{id:1, name:'小王', email:'', sex:'男', bornDate:'1991-4-4'}, {id:1, name:'小李', email:'', sex:'男', bornDate:'1992-5-6'}, {id:1, name:'小兰', email:'', sex:'女', bornDate:'1993-3-7'} ]; var store=new data:data, fields:["id","name","sex","email",{name:"bornDate",type:"date",dateFormat:"Y-n-j"}] }); var colM=new header:"姓名", dataIndex:"name", sortable:true, editor:new , {header:"性别", dataIndex:"sex" }, {header:"出生日期", dataIndex:"bornDate", width:120, renderer:, {header:"电子邮件", dataIndex:"email", sortable:true, editor:new ]);1页如有你有帮助，请购买下载，谢谢！var grid = new renderTo:"hello", title:"学生基本信息管理", height:200, width:600, cm:colM, store:store, autoExpandColumn:3 }); });上面的程序首先定义了一个包含学生信息的对象数组，然后创建了一个 JsonStore，在创建这个 store 的时候，指定 bornDate 列的类型为日期 date 类型，并使用 dateFormat 来指定日期信息的格式为"Y-n-j"， Y 代表年，n 代表月,j 代表日期。
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网址：http://extjs../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_.js)，其中ext-base.js表示框架基础库，ext-all.js是extjs的核心库。
学习系列(5)之第二式
上篇中我们简单的谈到了FormPanel中的fieldset和ComboBox,今天我们继续把这个话题说下去，说全一点，说深一点。
3.可选的fieldset实例
其实就是带个chechbox，有点像论坛注册时有一部分是选填信息的那种效果，主要知识点：
单验证实例（空验证，密码确认验证，email验证）
我们可以用单独的js写表单验证，但是extjs已经为我们想到了（自己单独写反而不方便）。
在验证之前，我不得不提两个小知识点：
们看一个最简单的例子：空验证（其实这不算是一个专门的验证例子）
vtype格式进行简单的验证。
在此举邮件验证的例子，重写上面代码的items配置:
items:[
{fieldLabel:"不能为空",
vtype:"email",//email格式验证
vtypeText:"不是有效的邮箱地址",//错误提示信息,默认值我就不说了
id:"blanktest",
anchor:"90%"
}
你可以修改上面的vtype为以下的几种extjs的vtype默认支持的验证：
//form验证中vtype的默认支持类型
//只能输入字母，无法输入其他（如数字，特殊符号等）
/只能输入字母和数字，无法输入其他
/email验证，要求的格式是""
/url格式验证，要求的格式是
前面的验证都是extjs已经提供的验证，我们也可以自定义验证函数，比上面要复杂点了。
我们一起做一个密码确认的例子。
我们修改前面的代码：
//先用方法添加自定义的password验证函数（也可以取其他的名字）
password:function(val,field){//val指这里的文本框值，field指这个文本框组件，大家要明白这个意思
if{//confirmTo是我们自定义的配置参数，一般用来保存另外的组件的id值
var pwd=;//取得confirmTo的那个id的值
return (val==());
}
return true;
}
});
//配置items参数
items:[{fieldLabel:"密码",
id:"pass1",
anchor:"90%"
},{
fieldLabel:"确认密码",
id:"pass2",
vtype:"password",//自定义的验证类型
vtypeText:"两次密码不一致！",
confirmTo:"pass1",//要比较的另外一个的组件的id
anchor:"90%"
}
关于vtype的内容还有很多内容要挖掘，但现在我们就点到这里为止，以后有机会再讨论它的其他高级验证。
不知不觉中写了这么多，大家都要歇息了，我们下次再接着讨论，
（因为本人近期考试和其他锁杂事情，近期可能更新较慢，还请大家海量，耐心，支持！）。
