Ext JS 培训教程

合集下载

ext学习资料(图文)

ExtJs2.0学习系列(1)--Ext.MessageBox1.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-qianxudetianxia Ext.MessageBox.prompt("title","msg",function(e,text){alert(e+"-" +text);},this,true);//true为多行，this表示作用域4.Ext.MessageBox.show()方法功能很强大，采用config配置形式，比前面的方法使用更方便。

ExtJS6.0开发培训

一、EXT5ext5的主题是用SASS（点击进入）和Compass（点击进入）编写的。

在ext5中，仅仅通过更改SASS的变量值，就可以将几乎所有的组件样式定制了，包括颜色，字体，边框，背景。

本文介绍了如何创建一个在多应用中可分享的定制化主题。

1.环境要求Sencha Cmd 5这是一个命令行工具，用于部署Ext JS应用，创建一个Ext JS 5主题，你必须拥有Sencha Cmd 5 或更高版本注意：Sencha Cmd 5 已经预安装了SASS和Compass，如果你的电脑已经安装了，请卸载掉自己的。

Ruby安装ruby环境（点击进入）用1.9.3版本Ext JS如果你本地有Ext JS SDK，解压后在本地路径下执行Cmd命令就行。

不过我们已经不用下载Ext JS 了，你可以用“-ext”命令来自动下载最新版的Ext JS 5！我们这次就用这个命令来做。

2.创建自定义主题如上所述你需要安装ruby，cmd工具，就可以开始制作主题了创建一个工作空间第一步是用Sencha Cmd创建一个你自己的工作空间[ruby]view plaincopyprint?1.cd /d E:\ext2.sencha generate workspace-ext my-workspace如果你想使用一个下载好的SDK或本地的一个SDK副本，在命令前面加上你解压的Ext JS SDK的路径就可以了[ruby]view plaincopyprint?1.sencha -sdk~/sencha-5.0.0 generate workspace my-workspace1. sencha -sdk C:\Users\zj\Desktop\ext-5.1.0-gpl\ext-5.1.0 generate workspace D:\EXT\Sencha\Cmd5\Sencha\Cmd\work\ZJ生成的工作空间将利用脚手架生成一个Sencha目录，让我们进去看看[ruby]view plaincopyprint?1.cd my-workspace如图：“ext” --- 包含了Ext JS SDK“packages” --- EXT JS语言环境和主题包生成一个App来测试主题我们来生成一个App，在这个基础上来制作主题，在“my-workspace”路径下，用下面的命令来生成一个Ext JS应用的骨架：[ruby]view plaincopyprint?1.sencha -sdk ext generate app ThemeDemoApp theme-demo-app1. sencha -sdk ext generate app ZJEXT ZJEXT现在，我们生成了一个名字为ThemeDemoApp的应用，路径（也就是文件夹）为theme-demo-app。

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的核心库。

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入门(适合新手)

的富客户端应用，使得我们的b/s应用更加具有活力及生命力，提高用户体验。 Ext是一个用javascript编写，与后台技术无关的前端ajax框架。因此，可以把Ext用在.Net、Java、 Php等各种开发语言开发的应用中。 Ext最新版本是ext4.0
EXT JS 简介
界面示例一
EXT JS基础组件

Ext.FormPanel中的数据控件

Ext.form.Checkbox, Ext.form.CheckboxGroup boBox Ext.form.DateField Ext.form.HtmlEditor Ext.form.NumberField Ext.form.Radio, Ext.form.RadioGroup Ext.form.TextArea Ext.form.TextField Ext.form.TimeField Ext.form.VTypes
var tree = new Ext.tree.TreePanel({ rootVisible : true, autoScroll:true, loader : new Ext.tree.TreeLoader({ dataUrl : ‘loadTreeNode.do’ }), enableDD:true, containerScroll: true, dropConfig: {appendOnly:true}, root : new Ext.tree.AsyncTreeNode({ id : '0', text : '未分配权限', expanded: true }) });
EXT JS 简介
界面示例二
EXT JS 简介

前端开发-ExtJS框架培训

ExtJS框架培训●1、ExtJS 简介●2、ExtJS 基础组件●3、ExtJS组件之Panel●4、ExtJS 4.0布局●5、ExtJS与后台交互ExtJS简介●什么是ExtJS？•ExtJS是一个用javascript、CSS和HTML等技术实现的主要用于创建用户界面，且与后台技术无关的前端Ajax框架。

ExtJS 简介●ExtJS显示效果示例1ExtJS简介●ExtJS显示效果示例2ExtJS简介●认识ExtJS的开发包要开始ExtJS之旅的第一步是要获得开发包，可以从官方网站/下载。

下载地址是/products/extjs/downloa dExtJS简介●ExtJS4.0开发包的文件目录结构ExtJS简介●以下为其主要资源的简单介绍•builds：ExtJS压缩后的代码，经过压缩的代码体积更小，加载更快。

•docs：ExtJS的文档，其中最重要的是ExtJS的API。

•examples：官方的演示示例，通过对这些演示示例的熟悉，就能很快掌握ExtJS开发。

•locale：多国语言的资源文件，其中ext-lang-zh_CN.js是简体中文。

•pkgs：ExtJS各部分功能的打包文件。

•resources：ExtJS要用到的图片文件和样式表文件。

•bootstrap.js：Extjs库的引导文件，通过参数可以自动切换ext_all.js和ext_all_debug.js。

•ext_all.js：ExtJS的核心库，是必须要引入的。

•ext_all_debug.js：ext_all.js的调试版。

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简介●HelloWorld运行效果如下图:ExtJS简介●ExtJS拦路虎•问题1：导入js文件后，在js文件中定义的中文显示在页面后出现乱码。

Extjs教程第二章 Ext概览(2)

第二章 Ext概览（2）什么是配置对象（config object）？如果你对CSS和JSON熟悉的话，你可以发现配置对象和它们有相似之处，因为他们几乎完全一样。

配置对象的作用就是让程序语言更好地读懂数据的结构——这里所谓的程序语言就是Javascript。

举个例子来看看配置在我们代码中的体现：{title: 'Milton',msg: 'Have you seen my stapler?',buttons: {yes: true,no: true,cancel: true},icon: 'milton-icon',fn: function(btn) {Ext.Msg.alert('You Clicked', btn);}}智力的配置可能显得过于复杂，但是一旦我们了解了它，一切就将变的十分简单和迅速。

所有的Ext控件都需要配置对象，所以我们必须对它十分熟悉。

配置对象是我们相当有用的朋友。

这里提几点在使用配置对象时的注意事项：∙配置条目（record）要被花括号包围，每一个括号中的条目都是对象的一部分——{records}；∙每个条目都有属性名和属性值，其间被冒号分割，条目之间靠逗号分割——{name0: value0, name1: value1}；∙条目的属性值可以是任何数据类型，包括布尔型，数组，函数以及对象——{name0: true, name1: {name2: value2}}；方括号代表数组——{name: [‘one’, ‘two’, ‘three’]}。

数组中的元素也可以是包含对象、值与数字的任何东西。

使用JSON格式的最大好处就是你可以通过添加配置来修改控件。

不像原始的函数，配置选项现在变得毫不相干，可以任意增减。

JSON是如何工作的？你可能听别人提起过eval，它就大体上来自于JSON。

eval函数就是JavaScript用来解释JSON字符串的，把字符串转化为对象、数组、函数或者其它。

ExtJS教程--第一版

• 由类定义的，并且可以在类对象自身状态发生改变时触发。 • 只有被定阅的事件才会有效。 • 如果不需要此事件，应该进行退定，增强程序的执行效率。
返回
ExtJs---配置选项config option
• 用心初始化一个ExtJs类对象的手段 • 注意：配置选项并不一定是属性，就算是属性，也有可能出现属性返回的类型与你当初指定的配置选项类型不一致的情况。
EXTJS属于AJAX
• • • • • • 基于JavaScript语言。基于Java Swing的MVC架构。支持组件化、模块化设计。提供“本地数据源”的支持。完成与服务端的交互机制是最有可能拥有大规模可视化开发环境的 Ajax技术。
学习EXTJS的前提
• • • • • • • • 1.JavaScript（必须) 2.JSON(必须） 3.Java 4.C# 5.Web Serices 6.HTML DOM（必须） 7.AJAX 8.基于类化思维的JavaScript编程
返回
ExtJs-----属性问，用以了解当前类对象的状态。 • 在实际的编程中，ExtJs的属性设置比较差劲，需要通过了解其源代码，才能了解各种实用属性的用处。
返回
ExtJs---命名空间namespace
• 能够将编写好的ExtJs类进行有效组织的手段。 • 这个也是ExtJs能称之为优秀AJAX框架的特征之一。
选择Ajax的理由
• Ajax虽然不是最新的WEB开发技术但是最后一个支持浏览器的WEB开发技术，因为无论是Sliverlight，还是Flex其原理已经不再需要浏览器支持了，而浏览器发展到现在，不可能短期内放弃。 • Ajax大都用JavaScript，JavaScript已经历经十年发展，已经拥有庞大的应用队伍， • 其继续发展的可能性还是有的。

ExtJS4.2入门教程

ExtJS4.2入门教程话不多说，进入正题，至于有的人想了解ext的优势神马的，自己百度去吧！一、exit的配置。

（注意：本文讲解的是Ext js4.2.1，不同版本部署的js包名有微小差别）因为只是简单学习，方便新手入门，咱们只引入3个基本包。

ext-all.cssext-all.jsExt.Base.js怎么引入？二、示例。

1.helloworld，呵呵，学习程序嘛，咱们都是从helloworld开始的!效果：2.创建一个面板Ext.onReady(function(){//创建一个面板var myPanel = new Ext.Panel({renderTo:Ext.getBody(),title:'哈哈哈',width:300,height:300,html:'test面板'});});效果：3.创建一个tabpanelvar panel = new Ext.TabPanel({ renderTo:Ext.getBody(), width:300,height:200,activeTab:0,items:[new Ext.Panel({title:"面板1",html:'面板1内容！'}),new Ext.Panel({ title:"面板2",height:30,html:'面板2内容！'}),new Ext.Panel({ title:"面板3",height:30,html:'面板3内容！'})]});});效果：3.创建面板工具栏new Ext.Panel({ renderTo:Ext.getBody(), title:"GO,GO,GO,上去就是干！", width:300,html:'上去就是干！', tbar:[{text:'顶部工具栏'}],bbar:[{text:'底部工具栏'}],buttons:[{text:'工具栏位于footer' }] });});效果：4.创建左右布局的面板var panel = new Ext.Panel({ renderTo:Ext.getBody(), width:300,height:200, layout:"column",items:[{columnWidth:0.5,title:'面板1',html:'面板1的内容！',},{columnWidth:0.5,title:'面板2',html:'面板2的内容！',}]});});效果：5.创建表格布局Ext.onReady(function(){var data=[[1, 'EasyJWeb', 'EasyJF',''],[2, 'jfox', 'huihoo',''],[3, 'jdon', 'jdon',''],[4, 'springside', 'springside','']];var store=new Ext.data.SimpleStore({data: data,fields: ["id","name","organization","homepage"] });var grid =new Ext.grid.GridPanel({renderT o: Ext.getBody(),title:"中国Java社区",height:200,width:400,columns:[{header:"编号", dataIndex:"id"}, {header:"项目名称", dataIndex:"name"}, {header:"开发团队", dataIndex:"organization"}, {header:"网址", dataIndex:"homepage"}],store:store,autoExpandColumn: 2});});效果：。

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的目的是满足高层次的用户交互——要比我们传统概念上的站点交互性更强。

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教程_第二章_Ext概览

第二章 Ext概览在这章里，我们将要开始使用Ext控件，我们将建立一系列的对话框来实现用户和浏览器的交互。

我们将使用onReady、MessageBox、以及get方法来了解如何建立不同种类的对话框并且学习如何在页面中修改HTML和样式。

除此之外，在这章里，我们还会：∙找到如何简单配置Ext控件的方法；∙用DOM做基础实现用户交互；∙用对话框指出用户想要做的事情；∙动态地响应用户的输入，并改变HTML和CSS。

我们将要从对Ext中几个主要函数的介绍来开始学习。

先回想一下第一章中介绍的示例，我们将会对它进行拓展。

这些核心函数我们将会在本书的哥哥部分使用：Ext.onReady：这个函数用来判断页面已经准备好来执行Ext的内容，即用来判断页面是否加载完全；Ext.Msg：用来产生一个有固定样式的消息窗口；configuration objects(配置对象)：这个函数定义控件将如何展示和工作；Ext.get：这个函数用来访问和控制DOM中的而元素。

准备，出发！在这部分中，我们将要学习onReady事件——在您使用Ext之前首先要了解东西。

我们还讲学习如何显示不同种类的对话框，并且如何相应用户跟对话框的交互。

在这之前，我们需要了解使用Ext的一些基本准则。

空白图片：在进行下一步之前，我们应该为Ext提供它所需要的——空白图片。

Ext需要一个1×1像素的透明gif图片，采用不同的方式来拉伸从而填补控件的宽度。

我们需要如下定义该图片的路径：Ext.onReady(function(){Ext.BLANK_IMAGE_URL = 'images/s.gif';});您可能会问为什么需要这张图片。

Ext的用户界面是依靠CSS的，但是CSS是通过为很多HTML元素提供样式来拼凑出Ext的组件的。

唯一能够跨浏览器且保持精准大小的只有图片。

所以图片被用来定义Ext组件的如何展现。

这是Ext提供浏览器兼容性的一种主要方式。

EXT基础培训

EXT基础培训
EXT面板的使用
• 面板Panel是ExtJS控件的基础，很高级控件都是在面板的基础上扩展的，还有其它大多数控件也都直接或间接有关系。应用程序的界面一般情况下是由一个一个的面板通过不同组织方式形成。面板由以下几个部分组成，一个顶部工具栏、一个底部工具栏、面板头部、面板尾部、面板主区域几个部分组件。面板类中还内置了面板展开、关闭等功能，并提供一系列可重用的工具按钮使得我们可以轻松实现自定义的行为，面板可以放入其它任何容器中，面板本身是一个容器，他里面又可以包含各种其它组件。
•
•
在实际应用中，可以直接使用MessageBox 的show 方法来显示自定义的对话框
function save(button) { if(button=="yes") { //执行数据保存操作 } else if(button=="no") { //不保存数据 } else { //取消当前操作 } } Ext.onReady(function(){ Ext.get("btn").on("click",function(){ Ext.Msg.show({ title:'保存数据', msg: '你已经作了一些数据操作，是否要保存当前内容的修改？', buttons: Ext.Msg.YESNOCANCEL, fn: save, icon: Ext.MessageBox.QUESTION}); }); });
• •
•
Viewport 不需要再指定renderTo，而我们也看到Viewport 确实填充了整个浏览器显示区域，并会随着浏览器显示区域大小的改变而改改。 Viewport 主要用于应用程序的主界面，可以通过使用不同的布局来搭建出不同风格的应用程序主界面。在Viewport 上常用的布局有fit、border 等，当然在需要的时候其它布局也会常用。看如下代码:

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入门例话教程

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基础教程 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培训文档

Copyright 2006 PCCW Solutions Ltd. All rights reserved.
11
信息提示框
Ext.Msg.show（自定义信息提示框）
<script type="text/javascript"> Ext.onReady(function(){ Ext.Msg.show({ title:'提示', msg:'我有三个按钮，和一个多行文本区。', modal:true, prompt:true, value:'请输入', fn:callBack, buttons:Ext.Msg.YESNOCANCEL, icon:Ext.Msg.QUESTION }) function callBack(id,msg){ alert('单击的按钮ID是：'+id+'\n'+'输入的内容是：'+msg); } }); </script>
Copyright 2006 PCCW Solutions Ltd. All rights reserved.
9
信息提示框
Ext.Msg.prompt
<script type="text/javascript"> Ext.onReady(function(){ Ext.Msg.prompt('提示','输入一些内容看看：',callBack,this,true); function callBack(id,msg){ alert('单击的按钮ID是：'+id+'\n'+'输入的内容是：'+msg); } }); </script>