EXT-API详解
EXT学习文档
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目录下。
EXT核心API详解(六)-Ext.Fx
useDisplay:Boolean 隐藏元素是否使用display或visibility属性?
afterStyle:String/Object/Function 事件完成后应用样式
block:Boolean 块状化?
endColor: (current color) or "ffffff",
easing: 'easeIn',
duration: 1
});
pause( Number seconds ) : Ext.Element
暂停
puff( [Object options] ) : Ext.Element
concurrent:Boolean 顺序还是同时执行？
stopFx ：Boolean 当前效果完成后随合的效果是否将停止和移除
fadeOut( [Object options] ) : Ext.Element
渐隐 fadeOut和fadeIn能使用一个特别的endOpacity属性以指示结束时的透明度
指示元素是否当前有特效正在活动
hasFxBlock() : Boolean
是否有特效阻塞了
highlight( [String color], [Object options] ) : Ext.Element
高亮显示当前元素
例:el.highlight("ffff9c", {
attr: "background-color", //can be any valid CSS property (attribute) that supports a color value
ext教程
ext教程EXT（JavaScript Extensions）是一种用于制作浏览器扩展的标准，它允许开发者以交互式方式修改和自定义Web页面的行为和外观。
在本教程中，我们将介绍如何使用EXT来开发浏览器扩展。
我们将涵盖EXT的基本概念、开发环境的设置、常用API的使用以及实例应用的创建。
首先，我们需要了解EXT的基本概念。
EXT是基于JavaScript 和HTML的，它允许我们通过注入代码来修改Web页面的行为。
我们可以使用EXT来添加自定义按钮、修改页面样式、拦截网络请求等。
为了开始开发EXT扩展，我们需要设置开发环境。
首先，我们需要安装一个支持EXT的浏览器，如Google Chrome或Mozilla Firefox。
然后，我们需要安装开发者工具，如Chrome开发者工具或Firefox开发者工具。
接下来，我们将介绍EXT的常用API。
EXT提供了一组API，用于访问和修改Web页面的各个部分。
例如，我们可以使用API来找到页面上的特定元素，修改其样式或内容。
我们还可以使用API来发送网络请求或拦截已有的请求。
最后，我们将创建一个实例应用来演示EXT的使用。
我们将开发一个简单的扩展，用于在Facebook页面上添加一个自定义按钮。
当用户点击按钮时，它会向后台服务器发送一个请求，并显示返回的数据。
在这个实例应用中，我们将演示如何创建一个扩展程序，并在Manifest文件中指定其基本属性。
我们还将展示如何使用Content Script来注入我们的代码到页面中，并使用Popup来创建一个显示在浏览器窗口中的弹出窗口。
通过这个教程，您将学习到EXT的基本概念、开发环境的设置、常用API的使用以及实例应用的创建。
您将了解如何使用EXT来修改和自定义Web页面的行为和外观。
这将对您开发具有定制功能的浏览器扩展非常有帮助。
总结来说，EXT是一种用于制作浏览器扩展的标准，它允许开发者以交互式方式修改和自定义Web页面的行为和外观。
Ext
类编程
JavaScript本身是基于原型的，这与普通基于类 的编程语言相比，在实现继承的机制上有较大的 出入。JavaScript中创建一个新类那便是修改了 某个对象原型（prototype）的结果。 Ext支持以下类风格的编程行为：继承扩展 （extend），重写（overrride）。
Ext Window
控件(widgets)：
– 控件是指可以直接在页面中创建的可视化组件，单、工具栏、按 钮等等， – 可以直接通过应用这些控件来实现友好、交互性强的 应用程序的UI。 – 控件位于源代码目录的widgets子目录中。
Ext类库 4-4
实用工具Utils：
–
Ext提供了很多的实用工具，可以方便我们实现如数 据内容格式化、JSON数据解码或反解码、对Date、 Array、发送Ajax请求、Cookie管理、CSS管理等扩 展等功能
– 底层API(core)
– 控件(widgets)
– 实用工具(Utils)
Ext类库 4-2
底层API ( core ) ：
– 提供了对DOM
操作、查询的封装、事件处理、DOM 查询器等基础的功能。 – 控件都是建立在底层api的基础上，位于源代码目录 的core子目录中。
Ext类库 4-3
Window本身也是一个容器，可以放置所有的Ext控件 主要是用来处理弹出式窗口。
var window = new Ext.Window({ title : "窗口测试", width : 400, height: 300, maximizable : true, minimizable : true, modal : true }); window.show();
ext开发手册
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支持将数据与组件进行绑定，以实现动态数据的展示和交互。
通过设置数据模型和绑定关系，可以在数据更新时自动更新组件的显示内容。
Extjs4 API文档阅读
Extjs4 API文档阅读(一)——类系统(Class System)2011-07-02 来源：互联网作者：佚名(共0 条评论)ExtJS4使用新的类机制进行了大量的重构。
为了支撑新的架构,ext4几乎重写了每一个类,因此最好先好好的理解一下新的架构,再开始编码。
ExtJS4使用新的类机制进行了大量的重构。
为了支撑新的架构,ext4几乎重写了每一个类,因此最好先好好的理解一下新的架构,再开始编码。
本文适合想在extjs4中扩展现有类或者创建新类的开发者。
其实，不管是想扩展还是使用，都建议您仔细阅读一下（如果E文好的，建议您还是阅读英文原文。
链接地址是：/ext-js/4-0/#/guide/class_system）。
文章共分4个部分，建议每一部分都仔细研究下，对之后的开发工作，会有意想不到的好处。
第一部分：概述。
说明了强大的类机制的必要性第二部分：编码规范。
讨论类、方法、属性、变量和文件命名第三部分：DIY。
详细的编码示例第四部分：错误处理和调试。
提供一些有用的调试和异常处理技巧一、概述ExtJS4拥有超过300个的类.迄今为止,我们的社区拥有超过20万来自世界各地,使用不同后台语言的开发者.要在这种规模的框架上提供具有以下特点的架构,需要面临巨大的挑战：1、简单易学。
2，快速开发、调试简单、部署容易。
3，良好的结构、可扩展性和可维护性。
二、编码和规范*在所有类、命名空间（namespace）和文件名中使用一致的命名约定,有助于保持代码的良好结构和可读性。
1) Classes类名只能包含字母和数字。
允许包含数字，但是大部分情况下不建议使用，除非这些数字是专业术语的一部分。
不要使用下划线，连字符等非数字字母符号。
例如：eful_util.Debug_Toolbar is discouraged2.MyCompany.util.Base64 is acceptable3.类名应该包含在使用点号分隔的命名空间中。
EXTJS API详解
EXT核心API详解1、Ext类....................................... 2 2、Array类 (4)3、Number类................................. 4 4、String类 (4)5、Date类.................................... 5 6、Function类 (6)7、Ext.Element类.............................. 7 8、Ext.DomQuery类 (13)9、Ext.DomHelper类........................ 14 10、Ext.Template类 (14)11、Ext.EventManager类..................15 12、Ext.EventObject类 (15)13、positeElement类............16 14、positeElementLite类 (16)15、Ext.Fx类.................................16 16、Ext.KeyNav类 (19)17、Ext.KeyMap类........................19 18、Ext.util.JSON类 (20)19、Ext.util.Format类.....................20 20、Ext.util.DelayedTask类 (20)21、Ext.util.TaskRunner类...............21 22、Ext.util.TextMetrics类 (21)23、Ext.XTemplate类..................... 21 24、Ext.data.Connection类 (22)25、Ext.Ajax类.............................. 22 26、Ext.data.Record类 (23)27、Ext.data.DataProxy类...............24 28、Ext.data.HttpProxy类 (24)29、Ext.data.MemoryProxy类.........25 30、Ext.data.ScriptTagProxy类 (25)31、Ext.data.DataReader类...............26 32、Ext.data.ArrayReader类 (26)33、Ext.data.JsonReader类............... 26 34、Ext.data.XmlReader类 (27)35、Ext.data.Store类........................28 36、Ext.data.GroupingStore类 (32)37、Ext.data.SimpleStore类............34 38、Ext.data.Tree类 (34)39、Ext.data.Node类.....................34 40、Ext.Action类 (35)41、Ext.Button类........................ 36 42、Ext.SplitButton类 (38)43、Ext.CycleButton类.................. 39 44、Ext.form.BasicForm类 (40)45、Ext.form.Field类........................ 41 46、Ext.form.Checkbox类 (42)47、Ext.form.Radio类.....................43 48、Ext.form.HtmlEditor类 (43)49、Ext.form.TextField类...............44 50、Ext.form.NumberField类 (44)51、Ext.form.TextArea类...............45 52、Ext.form.TriggerField类 (45)53、Ext.form.DateField类............45 54、boBox类 (46)55、Ext.form.TimeField类............47 56、Ext.menu.Menu类 (50)57、Ext.menu.BaseItem类...............50 58、Ext.menu.Adapter类 (51)59、Ext.menu.Item类..................... 51 60、Ext.menu.CheckItem类 (51)61、Ext.menu.Separator类............52 62、Ext.menu.TextItem类 (52)63、Ext.Toolbar类........................ 55 64、Ext.Toolbar.Item类 (56)65、Ext.Toolbar.Separator类......... 56 66、Ext.Toolbar.Spacer类 (56)67、Ext.Toolbar.TextItem类.........56 68、Ext.Toolbar.Fill类 (56)69、Ext.grid.ColumnModel类.........58 70、Ext.grid.PropertyColumnModel类 (59)71、Ext.grid.GridView类............... 59 72、Ext.grid.GroupingView类 (60)73、Ext.grid.EditorGridPanel类.........62 74、Ext.grid.PropertyGrid类 (65)1、Ext类addBehaviors(Object obj) : void对选择的元素应用事件侦听器,事件名以@附加在结尾,例如addBehaviors({// id=foo下所有的a标签加入click事件'#foo a@click' : function(e, t){// do something},// 用,分隔多个选择器'#foo a, #bar span.some-class@mouseover' : function(){// do something}});apply( Object obj, Object config, Object defaults ) : Object从config拷贝所有的属性到obj,如果有defaults参数,也将拷贝其属性到objapplyIf( Object obj, Object config ) : Object从config拷贝所有属性至obj(如果obj未定义相应属性)decode(Object obj) : String编码一个对象/数组或其它值为一个json格式字符串(支持对象,数组,日期,字符串)destroy( Mixed arg1, Mixed (optional), Mixed (optional) ) : void尝试去移除每个传入的对象,包括DOM,事件侦听者,并呼叫他们的destroy方法(如果存在)each( Array/NodeList/Mixed array, Function fn, Object scope ) : void利用array中的每个元素迭代调用fn.直到fn返回假,调用格式fn.call(scope || array[i], array[i], i, array);encode(String json) : Object将一个json格式字符串反序列化为对象escapeRe( String str ) : String为字符串正则编码将.在*+?^${}()|[]/\字符前加\extend( Object subclass, Object superclass, [Object overrides] ) : void从superclass类继承subclass,overrides参数是要重载的方法列表,详见overridefly( String/HTMLElement el, [String named] ) : Element得到全局共享的一个浮动元素el,如果有多个浮动元素可以使用命名以避免潜在的冲突get( Mixed el ) : Element得到一个Element对象,参数可以是id或DOM节点或已存在的Element对象getBody() : Element 得到当前文档的body对象getCmp( String id ) : Component通过id得到一个Component对象getDoc() : Element得到当前文档getDom( Mixed el ) : HTMLElement通过id或节点或Element对象返回一个DOM节点id( [Mixed el], [String prefix] ) : String为对象el生成一个惟一id,如果对象本身已有id,将不会被改变(可以使用前导符prefix)isEmpty( Mixed value, [Boolean allowBlank] ) : Boolean判断值是否为空,null, undefined或空字符串将返回真,如果allowBlank定义为真,空字符串将不被视为空namespace( String namespace1, String namespace2, String etc ) : void创建一个命名空间,例space('Company', 'Company.data');Company.Widget = function() { ... }Company.data.CustomStore = function(config) { ... }num( Mixed value, Number defaultValue ) : Number将value转为数值,如果value不是合法的数值类型,将返回defaultValue,其实defaultValue并不一定要求是数值类型,只要你愿意onReady( Function fn, Object scope, boolean override ) : void当文档准备好了之后引发fn,发生在page的onload事件之前,并且图片此时都还没有载入,scope定义执有者,override定义scope是否有默认的选择override( Object origclass, Object overrides ) : void利用overrides重写origclass的方法,例Ext.override(MyClass, {newMethod1: function(){// etc.},newMethod2: function(foo){// etc.}});query( String path, [Node root] ) : Array通过path,在root中选择节点数组,path可以是以下四种选择器之一[元素选择器] 例:* 任意节点E 一个E标签元素E F 祖先节点为E的F节点E >F 或E/F 父节点为E的F节点E +F 前一个兄弟节点为E的F节点E ~F 前面的兄弟节点中有E的F节点[属性选择器] 例:E[foo] 有foo属性的E节点E[foo=bar] 有foo属性值为bar的E节点E[foo^=bar] foo属性以bar开始的E节点E[foo$=bar] foo属性以bar结尾的E节点E[foo*=bar] foo属性中有bar字符串的E节点E[foo%=2] foo属性能被2整除的E节点E[foo!=bar] foo属性值不为bar的E节点[伪类选择器] 例:E:first-child E节点是父节点中第一个子节点E:last-child E节点是父节点中最后一个子节点E:nth-child(n) E是父节点中每n个节点E:nth-child(odd) E是父节点中的奇数节点E:nth-child(even) E是父节点中的偶数节点E:only-child E是父节点中惟一的子节点E:checked checked属性为真的节点E:first 子孙节点中的第一个E节点E:last 子孙节点中的最后一个E节点E:nth(n) 子孙节点中的第n个E节点E:odd E:nth-child(odd)的简写E:even E:nth-child(even)的简写E:contains(foo) innerHTML属性中含有foo的E节点E:nodeValue(foo) E节点中包含一个值为foo的文本节点E:not(S) 不匹配简单选择器S的E节点E:has(S) 有能匹配简单选择器S的子节点的E节点E:next(S) 下一个兄弟节匹配简单选择器S的E节点E:prev(S) 前一个兄弟节匹配简单选择器S的E节点type( Mixed object ) : String判断对象类型,如果不是下列值之一将返回false[样式选择器] 例:E{display=none} display属性值为none的E节点E{display^=none} display属性值以none开始的E节点E{display$=none} display属性值以none结束的E节点E{display*=none} display属性值含有none子字串的E节点E{display%=2} display属性值能被2整除的E节点E{display!=none} display属性值不等于none的E节点select( String/Array selector, [Boolean unique], [HTMLElement/String root] ) :CompositeElementLite/CompositeElement在root内通过样式选择器或元素数组selector选择元素或元素列表,unique指示是否只选择惟一值urlDecode( String string, [Boolean overwrite] ) : Object将url格式字符串string解码为json对象,overwrite参数指示是否不重写已存在的对象,例Ext.urlDecode("foo=1&bar=2"); //返回{foo: 1, bar: 2}Ext.urlDecode("foo=1&bar=2&bar=3&bar=4"); //返回{foo: 1, bar: 4}.Ext.urlDecode("foo=1&bar=2&bar=3&bar=4", true); //返回{foo: 1, bar: [2, 3, 4]}.urlEncode( Object o ) : String将json对象编码为url格式字符串,参见urlDecodetype( Mixed object ) : String得到object类型,如果不为以下列举值之一则返回false2、Array类indexOf( Object o ) : Numberobject是否在数组中,找不到返回-1;找到返回位置remove( Object o ) : Array从数组中删除指定的对象object,如果找不到object则数组无变化3、Number类constrain( Number min, Number max ) : Number检查数值是否介于min与max之间, 如果大于max 返回max,如果小于min返回min, 否则返回当前值4、String类escape( String string ) : String将string中的'和\替换为\' \\format( String string, String value1, String value2 ) : String格式化字符串,例:var cls = 'my-class', text = 'Some text';var s = String.format('<div class="{0}">{1}</div>', cls, text);// 结果<div class="my-class">Some text</div>leftPad( String string, Number size, [String char] ) : String以char将string补齐为size长度,char默认定义空格toggle( String value, String other ) : String交换值,如果当前值等于value,则被赋值other,反之等于value,例:sort = sort.toggle('ASC', 'DESC');trim() : String去除开头或结尾多余的空格5、Date类Date.parseDate( String input, String format ) : Date将字符串string依指定的格式format转换为时间,其中格式定义详见format方法例:dt = Date.parseDate("2006-01-15 3:20:01 PM", "Y-m-d h:i:s A" );add( String interval, Number value ) : Date增加时间段,String interval在Data类中已定义LI = "ms";Date.SECOND = "s";Date.MINUTE = "mi";Date.HOUR = "h";Date.DAY = "d";Date.MONTH = "mo";Date.YEAR = "y";例var dt2 = new Date('10/1/2006').add(Date.DAY, -5);between( Date start, Date end ) : Boolean是否在两个指定的时间之间clearTime( Boolean clone ) : Date清除时间信息,如果clone为真,则克隆自已并返回新Date,本身的值并不改变,反之则修改自身的值clone() : Date克隆format( String format ) : String格式化时间d 两位数的日期01 至31D 三字母的星期名Mon 至Sunj 一位数的日期 1 至31l 完整的星期名Sunday 至SaturdayS 日期的英文顺序刻词尾,两个字符st, nd, rd or th.w 一周中的第几天0 (星期天) 至6 (星期六)z 一年中的第几天0 至364 (闰年365 )W ISO-8601 星期数, 周一算一个星期的开始 1 至53F 月的完整英文名January 至Decemberm 月,以0前导01 至12M 三字母的简写月名Jan 至Decn 月 1 至12t 本月有多少天28 至31L 是否闰年1/0Y 完整的年份例: 1999 或2003y 年的后两位例: 99 或03a 上午/下午小写am 或pmA 上午/下午大写AM 或PMg 小时/12小时制 1 至12G 小时/24小时制0 至23h 小时/12小时制01 至12H 小时/24小时制00 至23i 分钟00 至59s 秒00 至59u 毫秒001 至999O 时区,与格林威治标准时间之差例: +0200T 时区简写例: EST, MDT ...Z 时区间距-43200 至50400其中Date类内置了几种格式Date.patterns = {ISO8601Long:"Y-m-d H:i:s",ISO8601Short:"Y-m-d",ShortDate: "n/j/Y",LongDate: "l, F d, Y",FullDateTime: "l, F d, Y g:i:s A",MonthDay: "F d",ShortTime: "g:i A",LongTime: "g:i:s A",SortableDateTime: "Y-m-d\\TH:i:s",UniversalSortableDateTime: "Y-m-d H:i:sO",YearMonth: "F, Y"};当然ISO8601Long和ISO8601Short还是非常招人喜欢的例:dt.format(Date.patterns.ISO8601Long);dt.format('Y-m-d H:i:s');getDayOfYear() : Number一年中的第几天,从0开始getDaysInMonth() : Number本月有多少天,getElapsed( [Date date] ) : Number当前日期对象与date之间相差的毫秒数getFirstDateOfMonth() : Date本月的第一天getFirstDayOfMonth() : Number本月第一天是星期几getGMTOffset() : String时区信息(见格式定义中的'O')getFirstDateOfMonth() : Date本月最后一天getFirstDayOfMonth() : Number本月最后一天是星期几getSuffix() : String日期后导符(见格式定义中的S)getTimezone() : String时区(见T)getWeekOfYear() : Number一年中的第几周(见W)isLeapYear() : Boolean是否闰年6、Function类createCallback(/*args...*/) : Function创建回叫方法createDelegate( [Object obj], [Array args], [Boolean/Number appendArgs] ) :创建委托这两个记法除了传参方式不同,看不出有什么差异都是调用method.apply,createCallback可以看作一个简化版的createDelegatecreateCallback==>return method.apply(window, args);createDelegate==>return method.apply(obj || window, callArgs);前者参数比较简单,直接传过去了,后者的规则比较复杂点,如果appendArgs为真,args将附加在参数列表之后,如果是数值,args将在参数列表的appendargs位置插入,其它情况下原参将不起作用例:var fn = func1.createDelegate(scope, [arg1,arg2], true)//fn(a,b,c) === scope.func1(a,b,c,arg1,arg2);var fn = func1.createDelegate(scope, [arg1,arg2])//fn(a,b,c) === scope.func1(arg1,arg2);var fn = func1.createDelegate(scope, [arg1,arg2], 1)//fn(a,b,c) === scope.func1(a,arg1,arg2,b,c);var fn = func1.createCallback(arg1, arg2);//fn() === func1(arg1, arg2)createCallback : function(/*args...*/)createInterceptor( Function fcn, [Object scope] ) : Function创建阻断方法,如果fcn返回false,原方法将不会被执行createSequence( Function fcn, [Object scope] ) : Function创建组合方法,执行原方法+fcndefer( Number millis, [Object obj], [Array args], [Boolean/Number appendArgs] ):Number定时执行，隔millis毫秒后执行原方法7、Ext.Element类Element( String/HTMLElement element, [Boolean forceNew] )由id或DOM节点创建Element对象Element.fly( String/HTMLElement el, [String named] ) : Element由id或DOM节点创建一个全局共享的活动元素,可由named命名以避免可能的冲突Element.get( Mixed el ) : Element由id或DOM节点或已存在的Element得到一个Ext.Element对象addClass( String/Array className ) : Ext.Element为元素添加一个或多个css类名addClassOnClick( String className ) : Ext.Element为点击事件添加和移除css类addClassOnFocus( String className ) : Ext.Element为得到和失去焦点添加和移除css类addClassOnOver( String className, [Boolean preventFlicker] ) : Ext.Element为鼠标移入移出事件添加和移除css类(该方法未实际使用preventFlicker参数)addKeyListener( Number/Array/Object/String key, Function fn, [Object scope] ) : Ext.KeyMap为对象添加按键侦听key由数值或字符串或{key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}这样的对象或他们的数组组成addKeyMap( Object config ) : Ext.KeyMap功能同addKeyListener,只是传参方式不同例:el.addKeyMap({key : "ab",ctrl : true,fn: fn,scope:el });和el.addKeyListener({key:"ab",ctrl:true},fn,el);是等价的,都是在按下ctral+a或ctrl+b后呼叫fnaddListener( String eventName, Function fn, [Object scope], [Object options] ) : void定义事件侦听,eventName:事件名,fn:事件处理方法,scrope:范围,其中options的定义比较复杂,可以包含以下属性scope {Object} : 处理fn的范围delegate {String} : 一个简单选择器(过滤目标或寻找目标的子孙节点)stopEvent {Boolean} : 阻止事件,等于preventDefault+stopPropagationpreventDefault {Boolean} : 阻止默认活动stopPropagation {Boolean} : 阻止事件冒泡normalized {Boolean} :设为flase将允许浏览器事件替代Ext.EventObjectdelay {Number} : 延时多少毫秒后发生single {Boolean} : 只运行一次buffer {Number} : 在Ext.util.DelayedTask中预定事件当然,还可能自定义参数以传入functionalignTo( Mixed element, String position, [Array offsets], [Boolean/Object animate] ) : Ext.Element将el对齐到element,positon,指示对齐的位置,可选以下定义tl 左上角(默认)t 上居中tr 右上角l 左边界的中央c 居中r 右边界的中央bl 左下角b 下居中br 右下角position还可以使用?约束移动不能超出窗口offsets 偏移量,以象素为单位animate 详见animate定义例:div1.alignTo('div2','c-bl?',[20,0],true);采用默认动画将div1的最中央对齐到div2的左下角,并右移20个象素,且不能超出窗口anchorTo( Mixed element, String position, [Array offsets], [Boolean/Object animate], [Boolean/Number monitorScroll], Function callback ) : Ext.Element功能和alignTo类似,只是当窗口重定义大小的时候也会引发重对齐事件monitorScroll参数说明是否需要监视滚动条行为,如果定义为数值则是定义的延时,单位为毫秒,默认是50ms, callback定义了animate完成后的回叫方法animate( Object args, [Float duration], [Function onComplete], [String easing], [String animType] ) : Ext.Element 执行动画.args:目标duration:时间间隔.默认是0.35Function:完成后的回叫方法easing:行为方法默认值是:easeOut,可选值在ext_base中找到,但没有说明,以下内容从yahoo ui中找到的easeNone:匀速easeIn:开始慢且加速easeOut:开始快且减速easeBoth:开始慢且减速easeInStrong:开始慢且加速,t的四次方easeOutStrong:开始快且减速,t的四次方easeBothStrong:开始慢且减速,t的四次方elasticIn:elasticOut:elasticBoth:backIn:backOut:backBoth:bounceIn:bounceOut:bounceBoth:太多,慢慢体会吧animType:定义动画类型,默认值run 可选值:color/motion/scrollappendChild( String/HTMLElement/Array/Element/CompositeElement el ) : Ext.Element添加子元素el(el须已存在)appendTo( Mixed el ) : Ext.Element将当前元素添加到elapplyStyles( String/Object/Function styles ) : Ext.Element应用样式,styles是"width:100px"这样的字符串或{width:"100px"}这样的对象,function是指返回这样的字串和对象的函数,这是一个没有用的批示,因为任何传参的地方都可以是返回要求类型的function.另见setStyle autoHeight( [Boolean animate], [Float duration], [Function onComplete], [String easing] ) : Ext.Element自适应高度,参数都是老相识了,惟一需要注意的是这个方法使用了setTimeout,高度不会马上变更blur() : Ext.Element失去焦点,忽略所有的异常boxWrap( [String class] ) : Ext.Element用一个指定样式class的div将当前元素包含起来,class默认值为x-boxcenter( [Mixed centerIn] ) : voidalignTo的简华版.相当于alignTo(centerIn || document, 'c-c'),当前元素的中心对齐到centerIn元素的中心child( String selector, [Boolean returnDom] ) : HTMLElement/Ext.Element依selector选择子孙节点,依returnDom不同批示返回html元素还是ext元素,未定义或false时返回Ext.Elementclean( [Boolean forceReclean] ) : void清除无用的空白文本节点(我喜欢这个想法)clearOpacity() : Ext.Element清除当前元素样式中不通用元素,清除ie中的filter,清除FF中的opacity/-moz-opacity/-khtml-opacity clearPositioning( [String value] ) : Ext.Element清除定位,恢复到默认值,相当于this.setStyle({"left": value,"right": value,"top": value,"bottom": value,"z-index": "","position" : "static"});clip() : Ext.Element裁剪溢出部分,用unclip()恢复contains( HTMLElement/String el ) : Boolean当前元素中是否存在elcreateChild( Object config, [HTMLElement insertBefore], [Boolean returnDom] ) : Ext.Element创建一个新的子节点config :DomHelper元素对象,如果没有特别指明tag,将使用div做默认tag,详情参见DomHelper,如果未定义insertBefore,则追加createProxy( String/Object config, [String/HTMLElement renderTo], [Boolean matchBox] ) : Ext.Element创建一个代理元素config:代理元素的类名或DomHelper config对象renderTo:将要绘制代理元素的html element或idmatchBox:是否对齐createShim() : Ext.Element在当前元素之前创建一个classname为ext-shim的iframe,有什么用?down( String selector, [Boolean returnDom] ) : HTMLElement/Ext.Element通过样式选择器selector选择子孙节点enableDisplayMode( [String display] ) : Ext.ElementsetVisibilityMode的简便方法findParent( String selector, [Number/Mixed maxDepth], [Boolean returnEl] ) : HTMLElement通过简单选择器selector寻找祖先节点,直到maxDepth(元素maxDepth默认为10,也可以是指定的DOM 节点),找不到返回nullfindParentNode( String selector, [Number/Mixed maxDepth], [Boolean returnEl] ) : HTMLElement从父元素开始使用简单选择器selector选择DOM节点first( [String selector], [Boolean returnDom] ) : Ext.Element/HTMLElement得到第一个符合selector条件的子节点,跳过文本节点focus() : Ext.Element得到焦点getAlignToXY( Mixed element, String position, [Array offsets] ) : Array得到当前元素按position规则对齐到element时的XY坐标值position/offsets参数参见alignTo方法getAnchorXY( [String anchor], [Object size], [Boolean local] ) : Array得到当前元素锚点指定的坐标值anchor定义参见alignTo方法,默认为cgetAttributeNS( String namespace, String name ) : String得到使用了命名空间namespace的属性name之值,getBorderWidth( String side ) : Number得到side指定的边框之和,side可以是t, l, r, b或他们的任意组合,比如getBorderWidth("lr")就是得到左边框和右边框之和getBottom( Boolean local ) : Number得到当前元素的底部纵坐标,元素纵坐标+元素高度getBox( [Boolean contentBox], [Boolean local] ) : Object得到当前元素的box对象:{x,y,width,height} getCenterXY() : Array如果当前元素要居中对齐时的横纵坐标值,等价getAlignToXY(document, 'c-c')getColor( String attr, String defaultValue, [String prefix] ) : void得到当前元素指定attr的颜色值,如果没指定,返回defualtValue,比较郁闷的是明明不是void为什么api中批示是一个void?应该是个字符串getComputedHeight() : Number得到计算过的高度,得到offsetHeight或css中定义的height值之一,如果使用了padding/borders,也会计算进去getComputedWidth() : Number见getComputedHeightgetFrameWidth( String sides ) : Number得到sides定义的border宽度和padding定义的宽度之和,side定义见getBorderWidthgetHeight( [Boolean contentHeight] ) : Number返回元素的offsetHeightgetLeft( Boolean local ) : Number得到横坐标getMargins( [String sides] ) : Object/Number如果没有定义sides,则返回一个含有{left,top,width,height}对象,反之返回side指定的宽度,side定义见getBorderWidthgetOffsetsTo( Mixed element ) : Array计算从element到当前元素的偏移量getPadding( String side ) : Number得到由side指定的padding之和getPositioning() : Object得到当前元素的位置信息返回含以下属性的对象{position,left,right,top,bottom,z-index}getRegion() : Region得到当前元素的区域信息返回含有以下属性的Ext.lib.Region对象{top, left, bottom, right}getRight( Boolean local ) : Number右边界值getScroll() : Object得到一个批示滚动条位置的对象{left, top}getSize( [Boolean contentSize] ) : Object得到宽度和高度组成的对象信息{width,height}getStyle( String property ) : String得到指定的样式值getStyles简化版getStyles( String style1, String style2, String etc. ) : Object得到由参数组成的对象例:el.getStyles('color', 'font-size', 'width')可能返回{'color': '#FFFFFF', 'font-size': '13px', 'width': '100px'}getTop( Boolean local ) : Number得到顶点纵坐标getUpdater() : Ext.Updater得到当前元素的Updater对象,参见Ext.Updater类getValue( Boolean asNumber ) : String/Number得到value属性的值getViewSize() : Object得到clientHeight和clientWidth信息给成的对象{width,height}getWidth( [Boolean contentWidth] ) : Number..这样的方法真多getX() : Number 得到页面偏移量,也就是绝对坐标getXY() : ArraygetY() : ArrayhasClass( String className ) : Boolean样式类className 存在于当前元素的dom 节点中hide( [Boolean/Object animate] ) : Ext.Element隐藏当前元素hover( Function overFn, Function outFn, [Object scope] ) : Ext.Element设置鼠标移入移出事件initDD( String group, Object config, Object overrides ) : Ext.dd.DDinitDDProxy( String group, Object config, Object overrides ) : Ext.dd.DDProxyinitDDTarget( String group, Object config, Object overrides ) : Ext.dd.DDTarget这个要放到Ext.dd去专门搞了,用于拖曳insertAfter( Mixed el ) : Ext.ElementinsertBefore( Mixed el ) : Ext.ElementinsertFirst( Mixed/Object el ) : Ext.Element在DOM中el元素之前之后...插入当前元素insertHtml( String where, String html, Boolean returnEl )插入html内容where 可选beforeBegin, afterBegin, beforeEnd, afterEndinsertSibling( Mixed/Object/Array el, [String where], [Boolean returnDom] ) :插入或创建el做为当前元素的兄弟节点,where可选before/after,默认为beforeis( String selector ) : Boolean验证当前节点是否匹配简单选择器selectorisBorderBox()测试不同的样式规则以决定当前元素是否使用一个有边框的盒子isDisplayed() : Boolean只要不是指定display属性none都会返回真isMasked() : Boolean仅有当前元素有mask并且可见时为真,mask译为蒙片?就是有些输入框没得到值之前会有一行模糊的提示的那种东西isScrollable() : Boolean可以滚动?isVisible( [Boolean deep] ) : Boolean可见?last( [String selector], [Boolean returnDom] ) : Ext.Element/HTMLElement见firstload( String/Function url, [String/Object params], [Function callback], [Boolean discardUrl] ) : Ext.Element直接应用当前updater的update方法mask( [String msg], [String msgCls] ) : Element为当前对象创建蒙片move( String direction, Number distance, [Boolean/Object animate] ) : Ext.Element相前元素相对于当前位置移动,direction批示方向可能的值是"l","left" - "r","right" - "t","top","up" - "b","bottom","down".distance,指示要移动的距离,以像素为单位moveTo( Number x, Number y, [Boolean/Object animate] ) : Ext.Element称动到指定的位置next( [String selector], [Boolean returnDom] ) : Ext.Element/HTMLElement下一个符合selector的兄弟节点,on( String eventName, Function fn, [Object scope], [Object options] ) : void详见addListenerposition( [String pos], [Number zIndex], [Number x], [Number y] ) : void初始化当前元素的位置pos可选择relative/absolute/fixedprev( [String selector], [Boolean returnDom] ) : Ext.Element/HTMLElement前一个符合selector的兄弟节点query( String selector ) : Array通过样式选择器选择子节点radioClass( String/Array className ) : Ext.Element添加样式或样式数组到当前元素，并移除兄弟节点中的指定样式relayEvent( String eventName, Object object ) : void将当前元素的eventName事件同时转发给object对象remove() : void从当前DOM中删除元素,并从缓存中移除removeAllListeners() : Ext.Element移除所有的侦听者removeClass( String/Array className ) : Ext.Element移除样式类removeListener( String eventName, Function fn ) : Ext.Element移除事件eventName的fn侦听器repaint() : Ext.Element强制浏览器重绘当前元素replace( Mixed el ) : Ext.Element用当前元素替换elreplaceClass( String oldClassName, String newClassName ) : Ext.Element替换样式类replaceWith( Mixed/Object el ) : Ext.Element用el替换当前元素scroll( String direction, Number distance, [Boolean/Object animate] ) : Boolean滚动,scroll会保证元素不会越界,direction和distance参数见movescrollIntoView( [Mixed container], [Boolean hscroll] ) : Ext.Element滚动到container内的视图scrollTo( String side, Number value, [Boolean/Object animate] ) : Element基本与scroll方法相同,但不保证元素不越界select( String selector, [Boolean unique] ) :与query不同的是,通过样式选择器selector,select方法会返回一个复合元素对象(CompositeElement)或CompositeElementLite,set( Object o, [Boolean useSet] ) : Ext.Element设置属性，例el.set({width:'200px',height:'200px'});setBottom( String bottom ) : Ext.ElementsetLeft( String left ) : Ext.ElementsetRight( String right ) : Ext.ElementsetTop( String top ) : Ext.ElementsetLeftTop( String left, String top ) : Ext.Element设置css 对象的属性值setBounds( Number x, Number y, Number width, Number height, [Boolean/Object animate] ) : Ext.Element马上改变当前元素的位置和尺寸setBox( Object box, [Boolean adjust], [Boolean/Object animate] ) : Ext.Element为当前元素设置一个盒子box:{x, y, width, height},adjust指示是否马上调整尺寸setDisplayed( Boolean value ) : Ext.Element设置可见性setHeight( Number height, [Boolean/Object animate] ) : Ext.ElementsetWidth( Number width, [Boolean/Object animate] ) : Ext.ElementsetSize( Number width, Number height, [Boolean/Object animate] ) : Ext.Element设置高度和宽度setLocation( Number x, Number y, [Boolean/Object animate] ) : Ext.Element设置当前元素相对于页面的横纵坐标setOpacity( Float opacity, [Boolean/Object animate] ) : Ext.Element设置透明度，opacity为1完全不透明,0完全透明setPositioning( Object posCfg ) : Ext.Element为当前元素指定位置信息,参数posCfg参见getPositioning说明setRegion( Ext.lib.Region region, [Boolean/Object animate] ) : Ext.Element为当前元素指定区域信息region定义见getRegionsetStyle( String/Object property, [String value] ) : Ext.Element设置样式setVisibilityMode( visMode Element.VISIBILITY ) : Ext.Element指示是使用Element.VISIBILITY还是Element.DISPLAY属性来定义可见性setVisible( Boolean visible, [Boolean/Object animate] ) : Ext.Element设置可见性setX( Number The, [Boolean/Object animate] ) : Ext.ElementsetXY( Array pos, [Boolean/Object animate] ) : Ext.ElementsetY( Number The, [Boolean/Object animate] ) : Ext.Element设置当前元素相对于page的位置show( [Boolean/Object animate] ) : Ext.Element显示当前元素swallowEvent( String eventName, [Boolean preventDefault] ) : Ext.Element阻止eventName事件冒泡，并视preventDefault阻断默认行为toggle( [Boolean/Object animate] ) : Ext.Element切换元素的visibility 或display属性,依赖于setVisibilityMode 设定的toggleClass( String className ) : Ext.Element如果样式名存在于当前元素对应的dom 节点，移除，反之应用translatePoints( Number/Array x, Number y ) : Object返回一个{left,top}结构un( String eventName, Function fn ) : Ext.Element解除事件侦听，参见removeListenerunclip() : Ext.Element见clip;unmask() : void见mask;unselectable(): Ext.Element禁止文本选择up( String selector, [Number/Mixed maxDepth] ) : Ext.Element通过样式选择器selector选择祖先节点update( String html, [Boolean loadScripts], Function callback ) : Ext.Element利用html更新当前节点内容，loadScripts指示html中如果有script，是否需要运行,这是一个innerHTML的一个老老老问题了wrap( [Object config], [Boolean returnDom] ) : HTMLElement/Element用另一个元素config包含自己8、Ext.DomQuery类selector语法详见Ext类compile( String selector, [String type] ) : Function编写一个选择器或xpath查询到一个方法以方便重用,type取select(默认)或simple值之一filter( Array el, String selector, Boolean nonMatches ) : Array过滤el中的元素,保留符合selector的，如果nonMatches为真，结果相反is( String/HTMLElement/Array el, String selector ) : Boolean验证el是否匹配selectorselect( String selector, [Node root] ) : Array从root中选择匹配selector的对象数组selectNode( String selector, [Node root] ) : Element返回root中第一个匹配selector的对象selectNumber( String selector, [Node root], Number defaultValue ) : Number返回root中第一个匹配selector的对象的节点值，转换为整数或浮点数selectValue( String selector, [Node root], String defaultV alue ) : void返回root中第一个匹配selector的对象的节点值，如果为null,用默认值defaultValue代替9、Ext.DomHelper类append( Mixed el, Object/String o, [Boolean returnElement] ) : HTMLElement/Ext.Element创建一个新的DOM元素并添加到el参数o 是一个DOM对象或一个原始html块applyStyles( String/HTMLElement el, String/Object/Function styles ) : void应用样式styles到对象el，样式的对象表示方法见Ext.ElementcreateTemplate( Object o ) : Ext.Template由o创建一个新的Ext.Template对象，详见Ext.TemplateinsertAfter( Mixed el, Object o, [Boolean returnElement] ) : HTMLElement/Ext.ElementinsertBefore( Mixed el, Object/String o, [Boolean returnElement] ) : HTMLElement/Ext.Element创建一个新的DOM对象o并将他们挺入在el之后/之前insertFirst( Mixed el, Object/String o, [Boolean returnElement] ) :创建一个新的DOM元素并做为第一个子节点添加到el (看了这个insertFirst，建议将append取一个别名insertLast:))insertHtml( String where, HTMLElement el, String html ) : HTMLElementwhere 可选值beforeBegin/afterBegin/beforeEnd/afterEnd将html代码插入到el附近,markup( Object o ) : String返回DOM对象o对应的html代码overwrite( Mixed el, Object/String o, [Boolean returnElement] ) :创建一个新的DOM元素o并用它重写el的内容10、Ext.Template类Template类主要是功能是生产html片断,例var t = new Ext.Template('<div name="{id}">','<span class="{cls}">{name:trim} {value:ellipsis(10)}</span>','</div>');t.append('some-element', {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'});公用方法:Template( String/Array html )构造一个Ext.Template对象，参数可以是字符串形式的html代码或它们组成的数组，Template.from( String/HTMLElement el, Object config ) : Ext.Template能过el的value(优先)或innerHTML来构造模板append( Mixed el, Object values, [Boolean returnElement] ) : HTMLElement/Ext.ElementinsertAfter( Mixed el, Object values, [Boolean returnElement] ) : HTMLElement/Ext.ElementinsertBefore( Mixed el, Object values, [Boolean returnElement] ) : HTMLElement/Ext.ElementinsertFirst( Mixed el, Object values, [Boolean returnElement] ) : HTMLElement/Ext.Element这组方法提供由value产生的html 代码，并添加到dom 做为el的最后一个子节点/下一个兄弟节点/前一个兄弟节点/第一个子节点values解释参见applyTemplateapply() : voidapplyTemplate( Object values ) : Stringapply是applyTemplate的简写，如果参数是数字values可以是一个数组，或者一个象{id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'}这样的json对象compile() : Ext.Template编译模板,替换掉模板中的\=>\\ ,\r\n|\n==>\\n, '=\',主要是为了js自己处理方便。
Ext属性详细信息
Ext属性详细信息Ext.window属性详细信息Ext.Window扩展⾃Ext.Panel，其xtype值为window。
1、主要配置项closable：是否允许关闭窗⼝，默认为true。
closeAction：关闭窗⼝的动作，包括以下两种：close：从DOM删除窗⼝，销毁窗⼝及其所属组件，窗⼝不再可⽤，重新显⽰需要调⽤show⽅法。
此为默认值。
hide：通过设置可见性隐藏窗⼝，窗⼝还可⽤，调⽤show⽅法后重新显⽰。
constrain：是否约束窗⼝只能在容器内移动，默认为false。
窗⼝默认渲染到document.body。
constrainHeader：是否约束窗⼝头部只能在容器内移动，默认为false。
draggable：是否可拖曳，默认为true。
resizable：是否可改变窗⼝的⼤⼩，默认为true。
modal：是否为模式窗⼝，默认为false。
maximizable：是否可最⼤化窗⼝，默认为false。
maximized：是否在初始化时最⼤化显⽰窗⼝，默认为false。
x：窗⼝的X坐标值。
y：窗⼝的Y坐标值。
manager：WindowGroup的引⽤。
expandOnShow：是否在窗⼝显⽰时展开它，默认为true。
当取值为false时，collapsed取值为true时，窗⼝初始显⽰时收缩。
minimizable：是否可最⼩化窗⼝，默认为false。
需要⾃定义最⼩化⾏为。
defaultButton：当窗⼝获得焦点时，默认获得焦点的按钮。
plain：主体背景是否透明，默认为false。
2、主要⽅法：show( [String/Element animateTarget], [Function callback], [Object scope] )：显⽰窗⼝。
hide( [String/Element animateTarget], [Function callback], [Object scope] )：隐藏窗⼝。
ext5
八、 提示框高级应用
Ext控件中的Tooltip 自由控制Tooltip的显示 Tooltip与Layer及Panel的关系 相关API详解
Ext开发视频教程
开源人 作品
主讲： 主讲：EasyJF开源团队 大峡
菜单Menu、工具栏Toolbar 及提示框Tips
主讲：EasyJF开源 大峡 主讲：
一、按钮Button的使用 按钮Button简介 Button的使用及事件响应 使用图片按钮 按钮API详解 其它按钮的特点及示例
二、工具栏选项及事件响应
工具栏简介 使用Ext工具栏的两种方式 使用 工具栏的两种方式
1、直接在页面中使用工具栏； 2、在控件中使用工具栏。
工具栏应用的简单示例 工具栏的选项
1、提供显示特性的工具栏； 2、提供操作入口的工具栏； 3、其它工具栏
事件响应及处理
三、工具栏高级应用及API详解
动态管理工具栏上的各选项 给已有的控件增加工具栏 带图标的工具栏 工具栏API详解
九、小结
Viewport用来作为应用程序主框架界面 窗口Window是可以浮动的面板 对话框是包含特定内容的模式窗口 选项板TabPanel是用来显示选项卡的面板 实现对Tab的灵活控制
The End 谢谢!
1、工具栏中的菜单支持； 2、控件的菜单支持。
使用弹出式菜单 菜单的综合示例
六、菜单API详解Fra bibliotek菜单类该系统对于学习Ext来说是一个非常综合的应用，包括的构架模式、 前后台交互、处理文件上传、Ext组件扩展、控件封装等很多功能。
Ext框架简介1
Ext类库简介
• 底层API(core)：底层API 中提供了对DOM 操作、查询的封装、事件 处理、DOM 查询器等基础的功能。其它控件都是建立在这些底层api 的基础上，底层api 位于源代码目录的core 子目录中，包括 DomHelper.js、Element.js 等文件。
Ext类库简介
helloWord示例程序
Ext框架基础及核心简介
Ext类库简介
Ext入门基础
Ext组件简介
Ext类库简介
• ExtJS 由一系列的类库组成，一旦页面成功加载了ExtJS 库后，我们 就可JS 的 类库由以下几部分组成：
• 底层API(core) • 控件(widgets) • 实用工具(Utils)
Ext入门基础
DOM的增删改查
• Ext.Element占Ext Core库的篇幅很大，其中方法就占据了大部份。 因此我们将这些方法可分为下面几类：
• • • • DOM查询或遍历（如query、select、findParent） CSS（如setStyle、addClass） DOM操控（如createChild、remove） 方位、尺寸（如getHeight、getWidth）
途常使用extget获得element对象对亍终端用户来说仅仅有element是丌够的比如用户要显示一个表格立了一系列的客户端界面组件component我们在编程时叧要使用这些次的抽象每一个组件在渲染render的时候都会依次途过elementdom?有相应的dom对象劢态改变页面的内容正是途过使用脚本语言来操作?一个节点添加阴影效果要隐藏戒显示某一个节点等我们都需要途过几句以使用element来包装任何domelement对象中添加了一系列快捷简便?要显示一棵树要显示一个弹出窗口等
ext 定义方法
ext 定义方法拓展文件名的定义方法（ext）在计算机领域中，文件名的拓展名（extension）是指文件名中最后一个点（.）之后的部分。
拓展名通常用于指示文件的类型或格式。
例如，.txt表示文本文件，.jpg表示图像文件，.mp3表示音频文件等。
在现代操作系统中，拓展名是由操作系统或应用程序来识别文件类型的重要信息之一。
因此，正确地定义和使用拓展名对于文件的识别和处理非常重要。
拓展名的定义方法可以通过以下几种方式实现：1. 根据文件内容定义拓展名：某些文件格式的内容具有独特的特征，可以根据这些特征来定义拓展名。
例如，一个以XML格式存储的文本文件，可以使用.xml作为其拓展名。
2. 参考已有的标准拓展名：某些常见的文件类型已经有了标准的拓展名。
如果一个文件类型与已有的标准拓展名相符，可以直接使用该拓展名。
例如，以.doc作为拓展名的文件通常是Microsoft Word文档。
3. 参考文件的用途：根据文件的用途来定义拓展名也是一种常见的方法。
例如，一个用于存储电子表格的文件可以使用.xls或.xlsx作为其拓展名，这样人们就可以根据拓展名来判断该文件是一个电子表格文件。
4. 考虑文件的兼容性：在定义拓展名时，还需要考虑文件的兼容性。
如果一个文件类型在不同的操作系统或应用程序中具有不同的拓展名，可能会导致文件无法正确识别或打开。
因此，应尽量选择广泛兼容的拓展名。
总结起来，拓展文件名的定义方法可以根据文件内容、已有的标准拓展名、文件的用途以及文件的兼容性来确定。
正确地定义和使用拓展名可以提高文件的识别和处理效率，从而提升计算机系统的整体性能。
希望通过本文的介绍，读者能够对拓展文件名的定义方法有一个清晰的了解，并在实际应用中正确地定义和使用拓展名，以提高文件管理的效率和准确性。
Ext简单介绍
Ext简单介绍ExtJS是⼀个Ajax框架，是⼀个⽤javascript写的，⽤于在客户端创建丰富多彩的web应⽤程序界⾯。
ExtJS可以⽤来开发RIA也即富客户端的AJAX应⽤ ExtJS是⼀个⽤javascript写的，主要⽤于创建前端⽤户界⾯，是⼀个与后台技术⽆关的前端ajax框架。
因此，可以把ExtJS⽤在.Net、Java、Php等各种开发语⾔开发的应⽤中。
ExtJs最开始基于YUI技术，由开发⼈员Jack Slocum开发，通过参考Java Swing等机制来组织可视化组件，⽆论从UI界⾯上CSS样式的应⽤，到数据解析上的异常处理，都可算是⼀款不可多得的JavaScript客户端技术的精品。
朋友问我,Ext怎么学习,我记得⾃⼰学的时候纯纯因为它的简单和视觉效果特别好,因为喜欢了才有努⼒的坚持不懈的激情.有朋友说能否写点简单的⽰例⽅便⼊门,我是觉得⾃⼰写的都是很浅陋东西,实在不知道怎么简单了,昨天晚上想了许久,觉得⾃⼰还是⽆⽐的粗浅,但依然有⼈说看不懂,我想可能是⾔语没有说清楚,或者你在等到天上掉馅饼吧.因为,我觉得开始学习就是不断的模仿,只要知道它的⼤致概念,在⾃⼰的项⽬中不断的接触,⼀天⼀天就会成长起来,建议最好根据⾃⼰的学习进度写个⼩⽹站,将所学的知识融会贯通⼀下,就像我写了好⼏个Ext的⽹站,虽然暂时都没有发布出去,但⾃⼰经常看看也是对⾃⼰的⼯作的激励吧.接下来⼀段⽇⼦,尽量写⼀些Ext2.2所有的对象的最简单的⽤法.如果能够坚持,以后会写⼀个对应的提⾼系列.下⾯就开始Ext之旅吧Ext是什么?答⽈:Ext是⼀个⽤jscript(javascript)所写的⼀个ajax框架(我想⼤家都知道什么是ajax了吧,假想你已经知道,那我就不说了).⽽javascript也是更知道它的概念了,就更不⽤说了吧,好,那就也不说了.什么是Ext呢,结合javascript和ajax,我想你闭眼猜都能够猜出它的功能了吧.那就⽤⾃⼰的语⾔说下什么是Ext吧,呵呵,思考真的很重要的.学习的重要环节就是要不断的⾃⼰总结,总结就来⾃⾃⼰的思考.Ext有多好呢?答⽈:仁者见仁, ⾃⼰好好看看吧,它的绚丽多姿是⽆法⽤语⾔描述的,你可能会很惊叹,但我还要告诉你,这个并没有把Ext的所有的功能都罗列出来,仅仅是⼀部分,有更多的有太多的等你去发现,星哥说了:太阳已经落⼭了,时间不等⼈滴.Ext难吗?答⽈:太多的⼈问这个问题,就像我开始学习java⼀样,我问了好多好多⼈,都说难,让我学习的信⼼到最后都剩的没有⼀点⼉了,于是学了当时⾝边谁也不懂的.呵呵.如果有⼈问我这个问题,我告诉你,真的很简单,不是说我会了才这么说,其实,我想说的是:⼤家玩游戏基本上都是⽆师⾃通的吧,现在明⽩了吧,如果你有玩游戏的那份精神和⽃志,靠,天下事难难难者亦易易易也.在哪⾥下载Ext呢?答⽈:好,你能够这么问,看来我做说客还是可以的(信⼼指数⼜增加了),因为我是从2.0版本,2.1版本,到现在的2.2版本,我真的说不出来他们到底有何具体的差别,但明显的看见它明显壮⼤了,不仅仅是体积,更是它的⼒量. 官⽅的版本,有各个版本的,我建议学习最新的吧.Ext有核⼼吗?答⽈:看来只有我才能够问这个问题呀,当年⽐⼲⽆⼼⽽死,看来框架也是⼀样的,没有核⼼怎么可以呢.我想在javascript中⼤家也都知道什么是类了吧,简单的说就是⼀个函数就是⼀个类,类⾥⾯还可以有很多的类,可以⽆限嵌套.⽽Ext就是有很多的类库组成,也就是有很多的函数组成,只是现在天上飞的⽔⾥游的都成了对象了,所以很多技术也都⽤对象的语⾔来描述.Ext就是主要有哪些类库组成呢?有⼈说肯定有API层,是的,有的,有些⼈总是喜欢称底层是API(API是什么意思,全称Application Programming Interface 应⽤编程接⼝),喜欢就喜欢吧,我管不着.但Ext说了,要改变这样的称呼,于是Ext称之为Core,为什么呢?因为Ext的底层在Core这个⽂件夹⾥⾯.core是什么意思呢?core[kC:]n.果核, 中⼼, 核⼼,我觉得称底层为Core确实不错,⽽且⼤写的CORE还有⼀个意思:CORE=Congress of Racial Equality 争取种族平等⼤会.感觉Ext的作者Jack Slocum是具有很浓烈的浪漫主义情怀的追求完美的⼀个程序员. 说到Core了:core对Ext的DoM操作,事件处理以及所有的直接在页⾯上可以展⽰的和不可以展⽰的组件等提供了基础的功能.刚刚提到可显⽰的控件也叫组件,我们在程序中可以直接通过这些控件来实现⾮常友好,并且交互性也很好的应⽤.特别⼀提的是在那些不可见的组件中,有⼀个utils类,该类提供了很多的很实⽤的功能,可以⽅便实现对接收和发送的数据进⾏各种操作,实在是Ext框架不可或缺的⼀部分.如何介绍Ext的组件呢?答⽈:这个问题我确实想了很长时间,因为像很多软件的帮助教程⼀样,它们总是把该软件的所有功能都罗列出来,然后再逐个详解,甚⾄很多功能可能你都从来都不需要,但你并不知道⾃⼰是否需要,就像最近在学习flash,总感到⾃⼰有茫然不知所措的感觉,学习的态度都会转变.但,也不能够说⼈家的帮助教程不好呀,毕竟是追求完整性和可⽤性⽅⾯,每个⼈的见解并不⼀样. 好吧,我下定决⼼了.先简单把组件说下,然后对这些组件再详细解说加⽰例,⽽且每个⽰例都追求可⽤和简单,将来再写⼀个深⼊的就能够达到完整性,倒不是说⼀定要追求完整,⽽是,如果你仅仅写了⼊门,却没有提⾼的版本,感觉⾃⼰并没有把事情做好做完整,毕竟⼈⼈都希望有始有终呀.毕竟⾃⼰还想早点介绍点关于Flex的故事呢,唉,总是没有时间.Ext的组件有哪些呢?答⽈:Every component has a specific xtype, which is its Ext-specific type name, along with methods for checking the xtype like getXType and isXType. 下⾯就是这些可以使⽤了控件的列表了,我直接从它的帮助⽂档复制过来,并同时加上了它的英⽂原⽂,因为每次看到这段我总是能够想起什么,呵呵:Ext组件主要包括⼀些常⽤组件,如表单组件,数据组件,导航组件,相信⼤家看名称就知道什么意思了.xtype Class基本组件---------------------------------------box Ext.BoxComponentbutton Ext.Buttoncolorpalette Ext.ColorPalettecomponent ponentcontainer Ext.Containercycle Ext.CycleButtondataview Ext.DataViewdatepicker Ext.DatePickereditor Ext.Editoreditorgrid Ext.grid.EditorGridPanelgrid Ext.grid.GridPanelpaging Ext.PagingToolbarpanel Ext.Panelprogress Ext.ProgressBarpropertygrid Ext.grid.PropertyGridslider Ext.Slidersplitbutton Ext.SplitButtonstatusbar Ext.StatusBartabpanel Ext.TabPaneltreepanel Ext.tree.TreePanelviewport Ext.Viewportwindow Ext.Window导航组件---------------------------------------toolbar Ext.Toolbartbbutton Ext.Toolbar.Buttontbfill Ext.Toolbar.Filltbitem Ext.Toolbar.Itemtbseparator Ext.Toolbar.Separatortbspacer Ext.Toolbar.Spacertbsplit Ext.Toolbar.SplitButtontbtext Ext.Toolbar.TextItem窗体组件---------------------------------------form Ext.FormPanelcheckbox Ext.form.Checkboxcombo boBoxdatefield Ext.form.DateFieldfield Ext.form.Fieldfieldset Ext.form.FieldSethidden Ext.form.Hiddenhtmleditor Ext.form.HtmlEditorlabel belnumberfield Ext.form.NumberFieldradio Ext.form.Radiotextarea Ext.form.TextAreatextfield Ext.form.TextFieldtimefield Ext.form.TimeFieldtrigger Ext.form.TriggerFieldExt的每个组件都是有⼀个指定的Xtype属性值,通过该值就可以得到该组件的类型,同时也可以根据该组件来定义⼀个组件例如:{xtype:"button",id:"btnEnter",text:"确定"} //这就是定义了⼀个按钮的组件.{xtype:"field",id:"txtName"} //这就是定义了⼀个输⼊框的组件.{xtype:"field",id:"txtPwd",inputType:"password"} //这就是定义了⼀个密码框的组件.当然你可以不⽤xtype ⽐如:var btnEnter = new Ext.Button({id:"btnEnter",text:"确定"} );//这就是定义了⼀个按钮的组件.var txtName = new Ext.form.Textfield({id:"txtName"} );//这就是定义了⼀个输⼊框的组件.var txtPwd = new Ext.form.Textfield({id:"txtPwd",inputType:"password"} );//这就是定义了⼀个密码框的组件.是不是很简单,在下⾯会解说具体的⽰例,包括它的基本的语法结构,同时,你需要明确,这和你在javascript⾥⾯的⽤法不会有不同的地⽅,只是有些⽅法Ext已经给我们封装好了,我们只要有拿来主义的精神就可以.特别⼀说的是:Ext的⼀些很实⽤的类都是全局的,⽆须new了,直接⽤就可以.在下节会介绍⼀些Ext的很好的很实⽤的也很简单就能够使⽤的Util类.转⾃。
Extjs核心api详解
EXT核心API详解(一)-Ext 1EXT核心API详解(二)-Array/Date/Function/Number/String 5EXT核心API详解(三)-Ext.Element 9EXT核心API详解(四)-Ext.DomQuery/DomHelper/Template 21EXT核心API详解(五)- 24EXT核心API详解(六)-Ext.Fx 27EXT核心API详解(七)- 30EXT核心API详解Ext.data(八) -Connection/Ajax/Record 35EXT核心API详解Ext.data(九)-DataProxy/HttpProxy/MemoryProxy/ScriptTagProxy 38 EXT核心API详解Ext.data(十)-DataReader/ArrayReader/JsonReader/XmlReader 40 EXT核心API详解Ext.data(十一)-Store 44EXT核心API详解Ext.data(十二)-GroupingStore/JsonStore/SimpleStore 49EXT核心API详解Ext.data(十三)-Tree/Node 51EXT核心API详解Ext.widgets(十四)-Button,SplitButton,CycleButton 54EXT核心API详解Ext.widgets(十五)-form(上) 61EXT核心API详解Ext.widgets(十六)-form(下) 67EXT核心API详解Ext.menu.Menu(十七) 74EXT核心API详解Ext.Toolbar(十八) 80EXT核心API详解Ext.widgets(十九)-grid(1) 83EXT核心API详解Ext.widgets(二十)-grid(2) 89EXT核心API详解(一)-ExtExt类addBehaviors( Object obj ) : void对选择的元素应用事件侦听器,事件名以@附加在结尾,例如addBehaviors({// id=foo下所有的a标签加入click事件'#foo a@click' : function(e, t){// do something},// 用,分隔多个选择器'#foo a, #bar span.some-class@mouseover' : function(){// do something}});apply( Object obj, Object config, Object defaults ) : Object从config拷贝所有的属性到obj,如果有defaults参数,也将拷贝其属性到objapplyIf( Object obj, Object config ) : Object从config拷贝所有属性至obj(如果obj未定义相应属性)decode(Object obj) : String编码一个对象/数组或其它值为一个json格式字符串(支持对象,数组,日期,字符串)destroy( Mixed arg1, Mixed (optional), Mixed (optional) ) : void尝试去移除每个传入的对象,包括DOM,事件侦听者,并呼叫他们的destroy方法(如果存在)each( Array/NodeList/Mixed array, Function fn, Object scope ) : void 利用array中的每个元素迭代调用fn.直到fn返回假,调用格式fn.call(scope || array[i], array[i], i, array);encode(String json) : Object将一个json格式字符串反序列化为对象escapeRe( String str ) : String为字符串正则编码将.在*+?^${}()|[]/\字符前加\extend( Object subclass, Object superclass, [Object overrides] ) : void 从superclass类继承subclass,overrides参数是要重载的方法列表,详见overridefly( String/HTMLElement el, [String named] ) : Element得到全局共享的一个浮动元素el,如果有多个浮动元素可以使用命名以避免潜在的冲突get( Mixed el ) : Element得到一个Element对象,参数可以是id或DOM节点或已存在的Element对象getBody() : Element得到当前文档的body对象getCmp( String id ) : Component通过id得到一个Component对象getDoc() : Element得到当前文档getDom( Mixed el ) : HTMLElement通过id或节点或Element对象返回一个DOM节点id( [Mixed el], [String prefix] ) : String为对象el生成一个惟一id,如果对象本身已有id,将不会被改变(可以使用前导符prefix)isEmpty( Mixed value, [Boolean allowBlank] ) : Boolean判断值是否为空,null, undefined或空字符串将返回真,如果allowBlank定义为真,空字符串将不被视为空namespace( String namespace1, String namespace2, String etc ) : void 创建一个命名空间,例space('Company', 'Company.data');Company.Widget = function() { ... }Company.data.CustomStore = function(config) { ... }num( Mixed value, Number defaultValue ) : Number将value转为数值,如果value不是合法的数值类型,将返回defaultValue,其实defaultValue并不一定要求是数值类型,只要你愿意onReady( Function fn, Object scope, boolean override ) : void当文档准备好了之后引发fn,发生在page的onload事件之前,并且图片此时都还没有载入,scope定义执有者,override定义scope是否有默认的选择override( Object origclass, Object overrides ) : void利用overrides重写origclass的方法,例Ext.override(MyClass, {newMethod1: function(){// etc.},newMethod2: function(foo){// etc.}});query( String path, [Node root] ) : Array通过path,在root中选择节点数组,path可以是以下四种选择器之一[元素选择器] 例:* 任意节点E 一个E标签元素E F 祖先节点为E的F节点E >F 或 E/F 父节点为E的F节点E +F 前一个兄弟节点为E的F节点E ~F 前面的兄弟节点中有E的F节点[属性选择器] 例:E[foo] 有foo属性的E节点E[foo=bar] 有foo属性值为bar的E节点E[foo^=bar] foo属性以bar开始的E节点E[foo$=bar] foo属性以bar结尾的E节点E[foo*=bar] foo属性中有bar字符串的E节点E[foo%=2] foo属性能被2整除的E节点E[foo!=bar] foo属性值不为bar的E节点[伪类选择器] 例:E:first-child E节点是父节点中第一个子节点E:last-child E节点是父节点中最后一个子节点E:nth-child(n) E是父节点中每n个节点E:nth-child(odd) E是父节点中的奇数节点E:nth-child(even) E是父节点中的偶数节点E:only-child E是父节点中惟一的子节点E:checked checked属性为真的节点E:first 子孙节点中的第一个E节点E:last 子孙节点中的最后一个E节点E:nth(n) 子孙节点中的第n个E节点E:odd E:nth-child(odd)的简写E:even E:nth-child(even)的简写E:contains(foo) innerHTML属性中含有foo的E节点E:nodeValue(foo) E节点中包含一个值为foo的文本节点E:not(S) 不匹配简单选择器S的E节点E:has(S) 有能匹配简单选择器S的子节点的E节点E:next(S) 下一个兄弟节匹配简单选择器S的E节点E:prev(S) 前一个兄弟节匹配简单选择器S的E节点type( Mixed object ) : String判断对象类型,如果不是下列值之一将返回false[样式选择器] 例:E{display=none} display属性值为none的E节点E{display^=none} display属性值以none开始的E节点E{display$=none} display属性值以none结束的E节点E{display*=none} display属性值含有none子字串的E节点E{display%=2} display属性值能被2整除的E节点E{display!=none} display属性值不等于none的E节点select( String/Array selector, [Boolean unique], [HTMLElement/String root] ) :CompositeElementLite/CompositeElement在root内通过样式选择器或元素数组selector选择元素或元素列表,unique指示是否只选择惟一值urlDecode( String string, [Boolean overwrite] ) : Object将url格式字符串string解码为json对象,overwrite参数指示是否不重写已存在的对象,例Ext.urlDecode("foo=1&bar=2"); //返回 {foo: 1, bar: 2}Ext.urlDecode("foo=1&bar=2&bar=3&bar=4"); //返回 {foo: 1, bar: 4}. Ext.urlDecode("foo=1&bar=2&bar=3&bar=4", true); //返回 {foo: 1, bar: [2, 3, 4]}.urlEncode( Object o ) : String将json对象编码为url格式字符串,参见urlDecodetype( Mixed object ) : String得到object类型,如果不为以下列举值之一则返回falsestring/number/boolean/function/object/array/regexp/element/nodelist/t extnode/whitespaceEXT核心API详解(二)-Array/Date/Function/Number/StringArray类indexOf( Object o ) : Numberobject是否在数组中,找不到返回-1;找到返回位置remove( Object o ) : Array从数组中删除指定的对象object,如果找不到object则数组无变化Number类constrain( Number min, Number max ) : Number检查数值是否介于min与max之间, 如果大于max 返回max,如果小于min返回min, 否则返回当前值String类escape( String string ) : String将string中的'和\替换为\' \\format( String string, String value1, String value2 ) : String格式化字符串,例:var cls = 'my-class', text = 'Some text';var s = String.format('<div class="{0}">{1}</div>', cls, text);// 结果<div class="my-class">Some text</div>leftPad( String string, Number size, [String char] ) : String以char将string补齐为size长度,char默认定义空格toggle( String value, String other ) : String交换值,如果当前值等于value,则被赋值other,反之等于value,例:sort = sort.toggle('ASC', 'DESC');trim() : String去除开头或结尾多余的空格Date类Date.parseDate( String input, String format ) : Date将字符串string依指定的格式format转换为时间,其中格式定义详见format方法例:dt = Date.parseDate("2006-01-15 3:20:01 PM", "Y-m-d h:i:s A" );add( String interval, Number value ) : Date增加时间段,String interval在Data类中已定义LI = "ms";Date.SECOND = "s";Date.MINUTE = "mi";Date.HOUR = "h";Date.DAY = "d";Date.MONTH = "mo";Date.YEAR = "y";例var dt2 = new Date('10/1/2006').add(Date.DAY, -5);between( Date start, Date end ) : Boolean是否在两个指定的时间之间clearTime( Boolean clone ) : Date清除时间信息,如果clone为真,则克隆自已并返回新Date,本身的值并不改变,反之则修改自身的值clone() : Date克隆format( String format ) : String格式化时间d 两位数的日期 01 至 31D 三字母的星期名 Mon 至 Sunj 一位数的日期 1 至 31l 完整的星期名 Sunday 至 SaturdayS 日期的英文顺序刻词尾,两个字符 st, nd, rd or th.w 一周中的第几天 0 (星期天) 至 6 (星期六)z 一年中的第几天 0 至 364 (闰年365 )W ISO-8601 星期数, 周一算一个星期的开始 1 至 53F 月的完整英文名 January 至 Decemberm 月,以0前导 01 至 12M 三字母的简写月名 Jan 至 Decn 月 1 至 12t 本月有多少天 28 至 31L 是否闰年 1/0Y 完整的年份例: 1999 或 2003y 年的后两位例: 99 或 03a 上午/下午小写 am 或 pmA 上午/下午大写 AM 或 PMg 小时/12小时制 1 至 12G 小时/24小时制 0 至 23h 小时/12小时制 01 至 12H 小时/24小时制 00 至 23i 分钟 00 至 59s 秒 00 至 59u 毫秒 001 至 999O 时区,与格林威治标准时间之差例: +0200 T 时区简写例: EST, MDT ... Z 时区间距 -43200 至 50400 其中Date类内置了几种格式Date.patterns = {ISO8601Long:"Y-m-d H:i:s",ISO8601Short:"Y-m-d",ShortDate: "n/j/Y",LongDate: "l, F d, Y",FullDateTime: "l, F d, Y g:i:s A",MonthDay: "F d",ShortTime: "g:i A",LongTime: "g:i:s A",SortableDateTime: "Y-m-d\\TH:i:s",UniversalSortableDateTime: "Y-m-d H:i:sO",YearMonth: "F, Y"};当然ISO8601Long和ISO8601Short还是非常招人喜欢的例:dt.format(Date.patterns.ISO8601Long);dt.format('Y-m-d H:i:s');getDayOfYear() : Number一年中的第几天,从0开始getDaysInMonth() : Number本月有多少天,getElapsed( [Date date] ) : Number当前日期对象与date之间相差的毫秒数getFirstDateOfMonth() : Date本月的第一天getFirstDayOfMonth() : Number本月第一天是星期几getGMTOffset() : String时区信息(见格式定义中的'O')getFirstDateOfMonth() : Date本月最后一天getFirstDayOfMonth() : Number本月最后一天是星期几getSuffix() : String日期后导符(见格式定义中的S)getTimezone() : String时区(见T)getWeekOfYear() : Number一年中的第几周(见W)isLeapYear() : Boolean是否闰年Function类createCallback(/*args...*/) : Function创建回叫方法createDelegate( [Object obj], [Array args], [Boolean/Number appendArgs] ) :创建委托这两个记法除了传参方式不同,看不出有什么差异都是调用method.apply,createCallback可以看作一个简化版的createDelegate createCallback==>return method.apply(window, args);createDelegate==>return method.apply(obj || window, callArgs);前者参数比较简单,直接传过去了,后者的规则比较复杂点,如果appendArgs为真,args将附加在参数列表之后,如果是数值,args将在参数列表的appendargs 位置插入,其它情况下原参将不起作用例:var fn = func1.createDelegate(scope, [arg1,arg2], true)//fn(a,b,c) === scope.func1(a,b,c,arg1,arg2);var fn = func1.createDelegate(scope, [arg1,arg2])//fn(a,b,c) === scope.func1(arg1,arg2);var fn = func1.createDelegate(scope, [arg1,arg2], 1)//fn(a,b,c) === scope.func1(a,arg1,arg2,b,c);var fn = func1.createCallback(arg1, arg2);//fn() === func1(arg1, arg2)createCallback : function(/*args...*/)createInterceptor( Function fcn, [Object scope] ) : Function创建阻断方法,如果fcn返回false,原方法将不会被执行createSequence( Function fcn, [Object scope] ) : Function创建组合方法,执行原方法+fcndefer( Number millis, [Object obj], [Array args], [Boolean/Number appendArgs] ):Number定时执行，隔millis毫秒后执行原方法EXT核心API详解(三)-Ext.ElementExt.Element类Element( String/HTMLElement element, [Boolean forceNew] )由id或DOM节点创建Element对象Element.fly( String/HTMLElement el, [String named] ) : Element由id或DOM节点创建一个全局共享的活动元素,可由named命名以避免可能的冲突Element.get( Mixed el ) : Element由id或DOM节点或已存在的Element得到一个Ext.Element对象addClass( String/Array className ) : Ext.Element为元素添加一个或多个css类名addClassOnClick( String className ) : Ext.Element为点击事件添加和移除css类addClassOnFocus( String className ) : Ext.Element为得到和失去焦点添加和移除css类addClassOnOver( String className, [Boolean preventFlicker] ) :Ext.Element为鼠标移入移出事件添加和移除css类(该方法未实际使用preventFlicker参数)addKeyListener( Number/Array/Object/String key, Function fn, [Object scope] ) : Ext.KeyMap为对象添加按键侦听 key由数值或字符串或{key: (number or array), shift: (true/false), ctrl: (true/false), alt: (true/false)}这样的对象或他们的数组组成addKeyMap( Object config ) : Ext.KeyMap功能同addKeyListener,只是传参方式不同例:el.addKeyMap({key : "ab",ctrl : true,fn: fn,scope:el });和el.addKeyListener({key:"ab",ctrl:true},fn,el);是等价的,都是在按下ctral+a或ctrl+b后呼叫fnaddListener( String eventName, Function fn, [Object scope], [Object options] ) : void定义事件侦听,eventName:事件名,fn:事件处理方法,scrope:范围,其中options的定义比较复杂,可以包含以下属性scope {Object} : 处理fn的范围delegate {String} : 一个简单选择器(过滤目标或寻找目标的子孙节点) stopEvent {Boolean} : 阻止事件,等于preventDefault+stopPropagation preventDefault {Boolean} : 阻止默认活动stopPropagation {Boolean} : 阻止事件冒泡normalized {Boolean} :设为flase将允许浏览器事件替代Ext.EventObject delay {Number} : 延时多少毫秒后发生single {Boolean} : 只运行一次buffer {Number} : 在Ext.util.DelayedTask中预定事件当然,还可能自定义参数以传入functionalignTo( Mixed element, String position, [Array offsets],[Boolean/Object animate] ) : Ext.Element将el对齐到element,positon,指示对齐的位置,可选以下定义tl 左上角(默认)t 上居中tr 右上角l 左边界的中央c 居中r 右边界的中央bl 左下角b 下居中br 右下角position还可以使用?约束移动不能超出窗口offsets 偏移量,以象素为单位animate 详见animate定义例:div1.alignTo('div2','c-bl?',[20,0],true);采用默认动画将div1的最中央对齐到div2的左下角,并右移20个象素,且不能超出窗口anchorTo( Mixed element, String position, [Array offsets],[Boolean/Object animate], [Boolean/Number monitorScroll], Function callback ) : Ext.Element功能和alignTo类似,只是当窗口重定义大小的时候也会引发重对齐事件monitorScroll参数说明是否需要监视滚动条行为,如果定义为数值则是定义的延时,单位为毫秒,默认是50ms,callback定义了animate完成后的回叫方法animate( Object args, [Float duration], [Function onComplete], [String easing], [String animType] ) : Ext.Element执行动画.args:目标duration:时间间隔.默认是0.35Function:完成后的回叫方法easing:行为方法默认值是:easeOut,可选值在ext_base中找到,但没有说明,以下内容从yahoo ui中找到的easeNone:匀速easeIn:开始慢且加速easeOut:开始快且减速easeBoth:开始慢且减速easeInStrong:开始慢且加速,t的四次方easeOutStrong:开始快且减速,t的四次方easeBothStrong:开始慢且减速,t的四次方elasticIn:elasticOut:elasticBoth:backIn:backOut:backBoth:bounceIn:bounceOut:bounceBoth:太多,慢慢体会吧animType:定义动画类型,默认值run 可选值:color/motion/scrollappendChild( String/HTMLElement/Array/Element/CompositeElement el ) : Ext.Element添加子元素el(el须已存在)appendTo( Mixed el ) : Ext.Element将当前元素添加到elapplyStyles( String/Object/Function styles ) : Ext.Element应用样式,styles是"width:100px"这样的字符串或{width:"100px"}这样的对象,function是指返回这样的字串和对象的函数,这是一个没有用的批示,因为任何传参的地方都可以是返回要求类型的function.另见setStyleautoHeight( [Boolean animate], [Float duration], [Function onComplete], [String easing] ) : Ext.Element自适应高度,参数都是老相识了,惟一需要注意的是这个方法使用了setTimeout,高度不会马上变更blur() : Ext.Element失去焦点,忽略所有的异常boxWrap( [String class] ) : Ext.Element用一个指定样式class的div将当前元素包含起来,class默认值为x-boxcenter( [Mixed centerIn] ) : voidalignTo的简华版.相当于alignTo(centerIn || document, 'c-c'),当前元素的中心对齐到centerIn元素的中心child( String selector, [Boolean returnDom] ) : HTMLElement/Ext.Element 依selector选择子孙节点,依returnDom不同批示返回html元素还是ext元素,未定义或false时返回Ext.Elementclean( [Boolean forceReclean] ) : void清除无用的空白文本节点(我喜欢这个想法)clearOpacity() : Ext.Element清除当前元素样式中不通用元素,清除ie中的filter,清除FF中的opacity/-moz-opacity/-khtml-opacityclearPositioning( [String value] ) : Ext.Element清除定位,恢复到默认值,相当于this.setStyle({"left": value,"right": value,"top": value,"bottom": value,"z-index": "","position" : "static"});clip() : Ext.Element裁剪溢出部分,用unclip()恢复contains( HTMLElement/String el ) : Boolean当前元素中是否存在elcreateChild( Object config, [HTMLElement insertBefore], [BooleanreturnDom] ) : Ext.Element创建一个新的子节点config :DomHelper元素对象,如果没有特别指明tag,将使用div做默认tag,详情参见DomHelper,如果未定义insertBefore,则追加createProxy( String/Object config, [String/HTMLElement renderTo], [Boolean matchBox] ) : Ext.Element创建一个代理元素config:代理元素的类名或DomHelper config对象renderTo:将要绘制代理元素的html element或idmatchBox:是否对齐createShim() : Ext.Element在当前元素之前创建一个classname为ext-shim的iframe,有什么用?down( String selector, [Boolean returnDom] ) : HTMLElement/Ext.Element 通过样式选择器selector选择子孙节点enableDisplayMode( [String display] ) : Ext.ElementsetVisibilityMode的简便方法findParent( String selector, [Number/Mixed maxDepth], [Boolean returnEl] ) : HTMLElement通过简单选择器selector寻找祖先节点 ,直到maxDepth(元素maxDepth默认为10,也可以是指定的DOM 节点),找不到返回nullfindParentNode( String selector, [Number/Mixed maxDepth], [Boolean returnEl] ) : HTMLElement从父元素开始使用简单选择器selector选择DOM节点first( [String selector], [Boolean returnDom] ) :Ext.Element/HTMLElement得到第一个符合selector条件的子节点,跳过文本节点focus() : Ext.Element得到焦点getAlignToXY( Mixed element, String position, [Array offsets] ) : Array 得到当前元素按position规则对齐到element时的XY坐标值position/offsets参数参见alignTo方法getAnchorXY( [String anchor], [Object size], [Boolean local] ) : Array 得到当前元素锚点指定的坐标值 anchor定义参见alignTo方法,默认为cgetAttributeNS( String namespace, String name ) : String得到使用了命名空间namespace的属性name之值,getBorderWidth( String side ) : Number得到side指定的边框之和,side可以是t, l, r, b或他们的任意组合,比如getBorderWidth("lr")就是得到左边框和右边框之和getBottom( Boolean local ) : Number得到当前元素的底部纵坐标,元素纵坐标+元素高度getBox( [Boolean contentBox], [Boolean local] ) : Object得到当前元素的box对象:{x,y,width,height}getCenterXY() : Array如果当前元素要居中对齐时的横纵坐标值,等价getAlignToXY(document, 'c-c')getColor( String attr, String defaultValue, [String prefix] ) : void 得到当前元素指定attr的颜色值,如果没指定,返回defualtValue,比较郁闷的是明明不是void为什么api中批示是一个void?应该是个字符串getComputedHeight() : Number得到计算过的高度,得到offsetHeight或css中定义的height值之一,如果使用了padding/borders,也会计算进去getComputedWidth() : Number见getComputedHeightgetFrameWidth( String sides ) : Number得到sides定义的border宽度和padding定义的宽度之和,side定义见getBorderWidthgetHeight( [Boolean contentHeight] ) : Number返回元素的offsetHeightgetLeft( Boolean local ) : Number得到横坐标getMargins( [String sides] ) : Object/Number如果没有定义sides,则返回一个含有{left,top,width,height}对象,反之返回side指定的宽度,side定义见getBorderWidthgetOffsetsTo( Mixed element ) : Array计算从element到当前元素的偏移量getPadding( String side ) : Number得到由side指定的padding之和getPositioning() : Object得到当前元素的位置信息返回含以下属性的对象{position,left,right,top,bottom,z-index}getRegion() : Region得到当前元素的区域信息返回含有以下属性的Ext.lib.Region对象{top, left, bottom, right}getRight( Boolean local ) : Number右边界值getScroll() : Object得到一个批示滚动条位置的对象{left, top}getSize( [Boolean contentSize] ) : Object得到宽度和高度组成的对象信息{width,height}getStyle( String property ) : String得到指定的样式值 getStyles简化版getStyles( String style1, String style2, String etc. ) : Object得到由参数组成的对象例:el.getStyles('color', 'font-size', 'width')可能返回 {'color': '#FFFFFF', 'font-size': '13px', 'width': '100px'}getTop( Boolean local ) : Number得到顶点纵坐标getUpdater() : Ext.Updater得到当前元素的Updater对象,参见Ext.Updater类getValue( Boolean asNumber ) : String/Number得到value属性的值getViewSize() : Object得到clientHeight和clientWidth信息给成的对象{width,height}getWidth( [Boolean contentWidth] ) : Number..这样的方法真多getX() : NumbergetXY() : ArraygetY() : Array得到页面偏移量,也就是绝对坐标hasClass( String className ) : Boolean样式类className 存在于当前元素的dom 节点中hide( [Boolean/Object animate] ) : Ext.Element隐藏当前元素hover( Function overFn, Function outFn, [Object scope] ) : Ext.Element 设置鼠标移入移出事件initDD( String group, Object config, Object overrides ) : Ext.dd.DD initDDProxy( String group, Object config, Object overrides ) :Ext.dd.DDProxyinitDDTarget( String group, Object config, Object overrides ) :Ext.dd.DDTarget这个要放到 Ext.dd去专门搞了,用于拖曳insertAfter( Mixed el ) : Ext.ElementinsertBefore( Mixed el ) : Ext.ElementinsertFirst( Mixed/Object el ) : Ext.Element在DOM中el元素之前之后...插入当前元素insertHtml( String where, String html, Boolean returnEl )插入html内容 where 可选beforeBegin, afterBegin, beforeEnd, afterEndinsertSibling( Mixed/Object/Array el, [String where], [Boolean returnDom] ) :插入或创建el做为当前元素的兄弟节点,where可选before/after,默认为beforeis( String selector ) : Boolean验证当前节点是否匹配简单选择器selectorisBorderBox()测试不同的样式规则以决定当前元素是否使用一个有边框的盒子isDisplayed() : Boolean只要不是指定display属性none都会返回真isMasked() : Boolean仅有当前元素有mask并且可见时为真,mask译为蒙片?就是有些输入框没得到值之前会有一行模糊的提示的那种东西isScrollable() : Boolean可以滚动?isVisible( [Boolean deep] ) : Boolean可见?last( [String selector], [Boolean returnDom] ) : Ext.Element/HTMLElement 见firstload( String/Function url, [String/Object params], [Function callback], [Boolean discardUrl] ) : Ext.Element直接应用当前updater的update方法mask( [String msg], [String msgCls] ) : Element为当前对象创建蒙片move( String direction, Number distance, [Boolean/Object animate] ) : Ext.Element相前元素相对于当前位置移动,direction批示方向可能的值是"l","left" - "r","right" - "t","top","up" - "b","bottom","down".distance,指示要移动的距离,以像素为单位moveTo( Number x, Number y, [Boolean/Object animate] ) : Ext.Element 称动到指定的位置next( [String selector], [Boolean returnDom] ) : Ext.Element/HTMLElement 下一个符合selector的兄弟节点,on( String eventName, Function fn, [Object scope], [Object options] ) : void详见addListenerposition( [String pos], [Number zIndex], [Number x], [Number y] ) : void 初始化当前元素的位置 pos可选择relative/absolute/fixedprev( [String selector], [Boolean returnDom] ) : Ext.Element/HTMLElement 前一个符合selector的兄弟节点query( String selector ) : Array通过样式选择器选择子节点radioClass( String/Array className ) : Ext.Element添加样式或样式数组到当前元素，并移除兄弟节点中的指定样式relayEvent( String eventName, Object object ) : void将当前元素的eventName事件同时转发给object对象remove() : void从当前DOM中删除元素,并从缓存中移除removeAllListeners() : Ext.Element移除所有的侦听者removeClass( String/Array className ) : Ext.Element移除样式类removeListener( String eventName, Function fn ) : Ext.Element移除事件eventName的fn侦听器repaint() : Ext.Element强制浏览器重绘当前元素replace( Mixed el ) : Ext.Element用当前元素替换elreplaceClass( String oldClassName, String newClassName ) : Ext.Element 替换样式类replaceWith( Mixed/Object el ) : Ext.Element用el替换当前元素scroll( String direction, Number distance, [Boolean/Object animate] ) : Boolean滚动,scroll会保证元素不会越界,direction和distance参数见movescrollIntoView( [Mixed container], [Boolean hscroll] ) : Ext.Element 滚动到container内的视图scrollTo( String side, Number value, [Boolean/Object animate] ) : Element 基本与scroll方法相同,但不保证元素不越界select( String selector, [Boolean unique] ) :与query不同的是,通过样式选择器selector,select方法会返回一个复合元素对象(CompositeElement)或CompositeElementLite,set( Object o, [Boolean useSet] ) : Ext.Element设置属性，例el.set({width:'200px',height:'200px'});setBottom( String bottom ) : Ext.ElementsetLeft( String left ) : Ext.ElementsetRight( String right ) : Ext.ElementsetTop( String top ) : Ext.ElementsetLeftTop( String left, String top ) : Ext.Element设置css 对象的属性值setBounds( Number x, Number y, Number width, Number height, [Boolean/Object animate] ) : Ext.Element马上改变当前元素的位置和尺寸setBox( Object box, [Boolean adjust], [Boolean/Object animate] ) : Ext.Element为当前元素设置一个盒子box:{x, y, width, height},adjust指示是否马上调整尺寸setDisplayed( Boolean value ) : Ext.Element设置可见性setHeight( Number height, [Boolean/Object animate] ) : Ext.Element setWidth( Number width, [Boolean/Object animate] ) : Ext.Element setSize( Number width, Number height, [Boolean/Object animate] ) : Ext.Element设置高度和宽度setLocation( Number x, Number y, [Boolean/Object animate] ) : Ext.Element 设置当前元素相对于页面的横纵坐标setOpacity( Float opacity, [Boolean/Object animate] ) : Ext.Element 设置透明度，opacity为1完全不透明,0完全透明setPositioning( Object posCfg ) : Ext.Element为当前元素指定位置信息,参数posCfg参见getPositioning说明setRegion( Ext.lib.Region region, [Boolean/Object animate] ) :Ext.Element为当前元素指定区域信息 region定义见getRegionsetStyle( String/Object property, [String value] ) : Ext.Element设置样式setVisibilityMode( visMode Element.VISIBILITY ) : Ext.Element指示是使用Element.VISIBILITY还是Element.DISPLAY属性来定义可见性setVisible( Boolean visible, [Boolean/Object animate] ) : Ext.Element 设置可见性setX( Number The, [Boolean/Object animate] ) : Ext.ElementsetXY( Array pos, [Boolean/Object animate] ) : Ext.ElementsetY( Number The, [Boolean/Object animate] ) : Ext.Element设置当前元素相对于page的位置show( [Boolean/Object animate] ) : Ext.Element显示当前元素swallowEvent( String eventName, [Boolean preventDefault] ) : Ext.Element 阻止eventName事件冒泡，并视preventDefault阻断默认行为toggle( [Boolean/Object animate] ) : Ext.Element切换元素的visibility 或display属性,依赖于setVisibilityMode设定的toggleClass( String className ) : Ext.Element如果样式名存在于当前元素对应的dom 节点，移除，反之应用translatePoints( Number/Array x, Number y ) : Object返回一个{left,top}结构un( String eventName, Function fn ) : Ext.Element解除事件侦听，参见 removeListenerunclip() : Ext.Element见clip;unmask() : void见mask;unselectable(): Ext.Element禁止文本选择up( String selector, [Number/Mixed maxDepth] ) : Ext.Element通过样式选择器selector选择祖先节点update( String html, [Boolean loadScripts], Function callback ) :Ext.Element利用html更新当前节点内容，loadScripts指示html中如果有script，是否需要运行,这是一个innerHTML的一个老老老问题了wrap( [Object config], [Boolean returnDom] ) : HTMLElement/Element用另一个元素config包含自己EXT核心API详解(四)-Ext.DomQuery/DomHelper/TemplateExt.DomQuery类selector语法详见Ext类compile( String selector, [String type] ) : Function编写一个选择器或xpath查询到一个方法以方便重用,type取select(默认)或simple值之一filter( Array el, String selector, Boolean nonMatches ) : Array过滤el中的元素,保留符合selector的，如果nonMatches为真，结果相反is( String/HTMLElement/Array el, String selector ) : Boolean验证el是否匹配selectorselect( String selector, [Node root] ) : Array从root中选择匹配selector的对象数组selectNode( String selector, [Node root] ) : Element返回root中第一个匹配selector的对象selectNumber( String selector, [Node root], Number defaultValue ) : Number返回root中第一个匹配selector的对象的节点值，转换为整数或浮点数selectValue( String selector, [Node root], String defaultValue ) : void 返回root中第一个匹配selector的对象的节点值，如果为null,用默认值defaultValue代替Ext.DomHelper类append( Mixed el, Object/String o, [Boolean returnElement] ) : HTMLElement/Ext.Element创建一个新的DOM元素并添加到el参数 o 是一个DOM对象或一个原始html块applyStyles( String/HTMLElement el, String/Object/Function styles ) : void应用样式styles到对象el，样式的对象表示方法见Ext.ElementcreateTemplate( Object o ) : Ext.Template由o创建一个新的Ext.Template对象，详见 Ext.TemplateinsertAfter( Mixed el, Object o, [Boolean returnElement] ) : HTMLElement/Ext.ElementinsertBefore( Mixed el, Object/String o, [Boolean returnElement] ) : HTMLElement/Ext.Element创建一个新的DOM对象o并将他们挺入在el之后/之前insertFirst( Mixed el, Object/String o, [Boolean returnElement] ) :创建一个新的DOM元素并做为第一个子节点添加到el (看了这个insertFirst，建议将append取一个别名insertLast:))insertHtml( String where, HTMLElement el, String html ) : HTMLElement where 可选值beforeBegin/afterBegin/beforeEnd/afterEnd将html代码插入到el附近,markup( Object o ) : String返回DOM对象o对应的html代码overwrite( Mixed el, Object/String o, [Boolean returnElement] ) :创建一个新的DOM元素o并用它重写el的内容Ext.Template类Template类主要是功能是生产html片断,例var t = new Ext.Template('<div name="{id}">','<span class="{cls}">{name:trim} {value:ellipsis(10)}</span>', '</div>');t.append('some-element', {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'});公用方法:Template( String/Array html )构造一个Ext.Template对象，参数可以是字符串形式的html代码或它们组成的数组，Template.from( String/HTMLElement el, Object config ) : Ext.Template 能过el的value(优先)或innerHTML来构造模板append( Mixed el, Object values, [Boolean returnElement] ) : HTMLElement/Ext.ElementinsertAfter( Mixed el, Object values, [Boolean returnElement] ) : HTMLElement/Ext.ElementinsertBefore( Mixed el, Object values, [Boolean returnElement] ) : HTMLElement/Ext.ElementinsertFirst( Mixed el, Object values, [Boolean returnElement] ) : HTMLElement/Ext.Element这组方法提供由 value产生的html 代码，并添加到dom 做为el的最后一个子节点/下一个兄弟节点/前一个兄弟节点/第一个子节点values解释参见applyTemplateapply() : voidapplyTemplate( Object values ) : Stringapply是applyTemplate的简写，如果参数是数字values可以是一个数组，或者一个象 {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'}这样的json对象compile() : Ext.Template编译模板,替换掉模板中的\=>\\ ,\r\n|\n==>\\n, '=\',主要是为了js自己处理方便overwrite( Mixed el, Object values, [Boolean returnElement] ) :利用values生成html替换el的内容set( String html, [Boolean compile] ) : Ext.Template设置模板的html,如果compile为真将调用compile方法EXT核心API详解(五)-Ext.EventManager/EventObject/CompositeElement/CompositeElementLiteExt.EventManager事件管理者中的大部分方法都在Ext中有定义,主要用于事件管理addListener( String/HTMLElement el, String eventName, Function handler,。
环信 解析 消息 ext字段
环信解析消息 ext字段环信是一款强大的即时通讯云服务，可以为开发者提供消息推送、实时聊天、在线客服等功能。
在环信的消息中，有一个重要的字段叫做ext，它可以用来传递一些扩展信息。
本文将围绕解析消息中的ext字段展开，探讨如何使用ext字段来传递标题信息。
我们需要了解一下ext字段的基本结构。
在环信的消息中，ext字段是一个JSON对象，可以包含多个键值对。
其中，我们可以自定义一个键，用来表示标题信息。
比如，我们可以定义一个键叫做"title"，用来存储消息的标题。
在接收到环信的消息后，我们可以通过解析ext字段，提取出标题信息，并将其展示在客户端或者服务端的界面上。
下面是一个示例的解析过程：1. 首先，我们需要获取到消息的ext字段。
可以通过环信的API来获取消息的详细内容。
2. 接下来，我们将ext字段解析为JSON对象，以便进一步操作。
可以使用JSON解析库来实现这一步骤。
3. 然后，我们可以通过JSON对象的get方法，根据键名"title"来获取到标题信息。
比如，可以使用ext.get("title")来获取。
4. 最后，我们将获取到的标题信息展示在界面上。
可以根据具体的需求，选择在移动端、网页端或者其他平台上展示。
通过上述步骤，我们就可以将消息中的ext字段解析为标题信息，并进行展示。
这样，用户就可以快速了解到消息的主要内容，提高了信息的传递效率。
除了传递标题信息，ext字段还可以用来传递其他的扩展信息。
比如，可以通过ext字段传递消息的发送者、接收者、发送时间等信息。
通过合理使用ext字段，我们可以在消息中携带更多的信息，满足不同场景下的需求。
需要注意的是，ext字段的内容应该遵循一定的规范，以确保解析的准确性和可靠性。
在设计ext字段的结构时，可以参考一些通用的规范或者约定，比如使用统一的键名、值类型等。
通过解析环信消息中的ext字段，我们可以方便地获取到消息的标题信息，并进行展示。
EXT介绍入门
EXT介绍⼊门⽆论你是Ext库的新⼿，抑或是想了解Ext的⼈，本篇⽂章的内容都适合你。
本⽂将简单地介绍Ext的⼏个基本概念，和如何快速地做出⼀个动态的页⾯并运⾏起来，假设读者已具备了⼀些JavaScript经验和初级了解HTML Dom。
下载Ext针对你的下载需求，有⼏个不同的弹性选项。
通常地，最稳定的版本，是较多⼈的选择。
下载解包后，那个example⽂件夹便是⼀个探索Ext 的好地⽅！开始！我们将使⽤Ext，来完成⼀些JavaScript任务。
Zip⽂件包括三个⽂件：ExtStart.html, ExtStart.js和ExtStart.css。
解包这三个⽂件到Ext的安装⽬录中（例如，Ext是在“C:\code\Ext\v1.0”中，那应该在"v1.0"⾥⾯新建⽬录“tutorial”。
双击ExtStart.htm，接着你的浏览器打开启动页⾯，应该会有⼀条消息告诉你配置已完毕。
如果是⼀个Javascript错误，请按照页⾯上的指引操作。
在你常⽤的IDE中或⽂本编辑器中，打开ExtStart.js看看：Ext.onReady可能是你接触的第⼀个⽅法。
这个⽅法是指当前DOM加载完毕后，保证页⾯内的所有元素能被Script引⽤（reference）。
你可删除alert()那⾏，加⼊⼀些实际⽤途的代码试试：Ext.onReady(function(){alert("Congratulations! You have Ext configured correctly!");});Element：Ext的核⼼⼤多数的JavaScript操作都需要先获取页⾯上的某个元素（reference）,好让你来做些实质性的事情。
传统的JavaScript⽅法，是通过ID获取Dom节点的：var myDiv = document.getElementById('myDiv');这毫⽆问题，不过这样单单返回⼀个对象（DOM节点），⽤起来并不是太实⽤和⽅便。
Extjs-02-官方API文档使用
Extjs-02-官⽅API⽂档使⽤官⽅API⽂档地址：/extjs/6.5.3/classic/Ext.html打开⽹页如下：1.选择所使⽤的Ext js版本，后⾯offline docs是离线⽂档的下载2.搜索功能：查找类，组件等需要注意这个API下⾯modern是⼿机端对应的组件，classic对⽤的是电脑端的组件的介绍例⼦：搜索messagebox,选择第⼆个Ext.window.MessageBox，打开如下：3.看懂API对组件的介绍：如单例对象，组件类，xtype，config配置，properties配置，methods⽅法，events事件，继承体系等（1）单例对象与组件类：点击左侧的Ext ,在显⽰的界⾯上会看到⼀个SINGLETON的标识，表⽰这是⼀个单例对象（注意，单例对象前⾯显⽰的是红⾊的图标），在整个应⽤当中，只有⼀个Ext对象，下边configs,properties，methods是这个单例对象具有的⼀些属性，⽅法等搜索messagebox时，会出现Ext.window.MessageBox，和Ext.MessageBox，后者是⼀个单例对象，如上图，⽽Ext.window.MessageBox是⼀个组件（每⼀个组件都是⼀个类），Ext.window.MessageBox 指明了 Ext.MessageBox这个对象所属的类是哪⼀个类，xtype 相当于⼀个别名，⽅便使⽤。
（2）configs 的使⽤，先关注⼀下类搜索和成员搜索的区别，是不同的搜索框以Ext.MessageBox为例上边fn就是alert⽅法的回调函数，也就是alert⽅法执⾏完后再执⾏的函数，scope是回调函数执⾏的范围，以例⼦说明如下： 1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>ext js⼊门</title>6<!-- 引⼊ext js 的样式⽂件-->7<link rel="stylesheet" type="text/css" href="ext/classic/theme-triton/resources/theme-triton-all.css"/>8<!-- 引⼊ext js的核⼼库-->9<script src="ext/ext-all.js"></script>10<script>11// alert("js原⽣弹出框：hello");12//需要Extjs框架初始化完成才能执⾏13 Ext.onReady(function(){14//使⽤ext 弹出框的回调函数15 Ext.MessageBox.alert('Ext弹出框','hello world',function () {16 console.log('ext js'); //在控制台打印内容17 });18 })19</script>20</head>21<body>2223</body>24</html>执⾏过程：常⽤组件panel的使⽤这⾥使⽤new关键字来创建⼀个panel对象，格式为new Ext.panel.Panel({ 需要配置的参数列表 })，这⾥需要配置的参数，把⿏标放在configs上⾯就显⽰出来可选的配置参数了：使⽤create⽅式创建对象：格式为： Ext.create('类的名字,{属性配置 }) ，或者直接搜索Panel这个类下⾯的create⽅法，给出了create⽅法的使⽤说明：1<!DOCTYPE html>2<html lang="en">3<head>4<meta charset="UTF-8">5<title>ext-panel使⽤</title>6<!-- 引⼊ext js 的样式⽂件-->7<link rel="stylesheet" type="text/css" href="ext/classic/theme-triton/resources/theme-triton-all.css"/>8<!-- 引⼊ext js的核⼼库-->9<script src="ext/ext-all.js"></script>10<script>1112 Ext.onReady(function(){13//不同于单例对象，panel对象需要⾃⼰创建，第⼀种⽅式：new对象14var panel = new Ext.panel.Panel({15 width:300,16 height:150,17 title:'⾯板标题',18 html:'⾯板显⽰的内容',//指定显⽰的内容19 renderTo: 'dd',//⾯板必须要进⾏渲染才进⾏显⽰,配置这个panel在哪⾥显⽰20 })21//使⽤create⽅法格式为： Ext.create('类的名字,{属性配置 })22 Ext.create('Ext.panel.Panel',{23 width:300,24 height:150,25 title:'⾯板2',26 html:'⾯板2显⽰的内容',//指定显⽰的内容27//renderTo: 'dd2',28 renderTo:Ext.getBody()29 })30 })31</script>32</head>33<body>34<div id="dd"></div> 35</body>36</html>也可以使⽤ Ext.getBody() 来获取body这个对象，让panel显⽰在html的body中，运⾏如下：（Ext.get获取到的直接是Ext的对象，在创建的时候就进⾏渲染不像jquery中获取到的是DOM元素，需要⽤$()转换为jquery对象）第三种⽅式创建panel对象，格式为 Ext.create({xtype:' ' ,对象属性 })//通过别名获取panel对象Ext.create({xtype:'',对象属性 })var panel3 = Ext.create({xtype:'panel',width:300,height:150,title:'⾯板3',html:'⾯板3显⽰的内容',//指定显⽰的内容})panel3.render(Ext.getBody()) //在指定时刻渲染（3）properties:属性⽤来判断，查看，例如console.log(panel3.draggable); //打印⾯板的拖拽属性的值（4）methods当前组件拥有的⼀些⽅法，直接使⽤对象.⽅法名()就能调⽤了，如、panel3.close() ，关闭⾯板（5）events 事件例如：控制台打印 panel3.draggable的值后，关闭⾯板，当监听到关闭事件时，⼜开始执⾏关闭事件的回调函数，在控制台打印关闭在组件配置时使⽤listeners:{} 属性来设置事件监听：1 //通过别名获取panel对象Ext.create({xtype:'',对象属性 })2 var panel3 = Ext.create({3 xtype:'panel',4 width:300,5 height:150,6 title:'⾯板3',7 html:'⾯板3显⽰的内容',//指定显⽰的内容8 listeners:{9 close:function(){10 console.log("关闭...")11 }12 }13 })14 panel3.render(Ext.getBody()) //在指定时刻渲染15 console.log(panel3.draggable); //16 panel3.close()使⽤on⽅法监听组件的事件：对象.on('事件名称',function () { 回调函数要执⾏的业务 }1 var panel3 = Ext.create({2 xtype:'panel',3 width:300,4 height:150,5 title:'⾯板3',6 html:'⾯板3显⽰的内容',//指定显⽰的内容7 listeners:{8 close:function(){9 console.log("关闭...")10 }11 }12 })13 panel3.on('close',function () {14 console.log("使⽤on监听事件...")15 })16 panel3.render(Ext.getBody()) //在指定时刻渲染17 console.log(panel3.draggable); //18 panel3.close()使⽤addListener() ⽅法来监听事件：对象.addListener('事件名称',function () { 事件的回调函数执⾏的业务 } )1 var panel3 = Ext.create({2 xtype:'panel',3 width:300,4 height:150,5 title:'⾯板3',6 html:'⾯板3显⽰的内容',//指定显⽰的内容7 listeners:{8 close:function(){9 console.log("关闭...")10 }11 }12 })13 panel3.on('close',function () {14 console.log("使⽤on监听事件...")15 })16 panel3.addListener('close',function () {17 console.log("使⽤addListener⽅法监听事件...")18 })19 panel3.render(Ext.getBody()) //在指定时刻渲染20 console.log(panel3.draggable); //21 panel3.close()运⾏结果如下：从上⾯可以看出，事件是可以叠加的。
ExtAPI详解详细版
Ext-API详细解说1、Ext.apply(Object obj, Object config, Object defaults ) : Object将config中的所有属性复制到obj中，如果配置了defaults，则先将defaults中的属性传入obj，然后再将config中属性传入，一般defaults用于定义一些默认值。
注意：每个参数都必须是对象object，而不能是function或其他。
创建object可以通过new function(){}、new Object()、{}等方法创建。
2、Ext.emptyFn: Function用于返回一个空函数，便于在程序中创建空函数。
Ext.emptyFn返回function(){}3、Ext.applyIf(Object obj, Object config) : Object功能如同Ext.apply,但是只把config中存在而obj不存在的属性复制过去。
4、Ext.addBehaviors( Object obj ) : void为页面中一个或多个元素添加事件元素使用css规则查找，其中元素与事件用@隔开 Ext.addBehaviors({//为id为foo的元素下的所有a元素添加click事件'#foo a@click' : function(e, t){// do something},// 为多个选择器添加相同的事件(mouseover)。
在@之前使用逗号分开'#foo a, #bar span.some-class@mouseover' : function(){// do something}});5、Ext.id( [Mixed el], [String prefix] ) : String返回一个唯一的id值。
如果只需要获取一个唯一的id值，则直接调用Ext.id()；如果需要为某个元素设定一个唯一的id值并返回id则调用Ext.id(el)，el为元素Id、Dom对象或Ext的Element对象。
easyapi 语法
easyapi 语法EasyAPI 是一种简单易用的 API 设计语言，用于描述和定义网络 API。
它具有以下语法规则：1. API 定义：使用 `api` 关键字开始 API 的定义。
```api MyAPI {// API 定义内容}```2. 版本定义：使用 `version` 关键字指定 API 的版本。
```api MyAPI {version 1.0// API 定义内容}```3. 路径定义：使用 `path` 关键字定义 API 的路径，并指定路径类型（GET、POST、PUT 等）和路径地址。
```api MyAPI {version 1.0path GET /users// 路径的具体定义内容}```4. 参数定义：使用 `param` 关键字定义 API 的参数，并指定参数的名称、类型和是否必需。
```api MyAPI {version 1.0path GET /usersparam String name // 字符串类型的参数 nameparam Int age? // 整数类型的可选参数 age}```5. 响应定义：使用 `response` 关键字定义 API 的响应，并指定响应的状态码和返回值类型。
```api MyAPI {version 1.0path GET /usersparam String nameresponse 200 String // 状态码 200 返回字符串类型的响应}```6. 示例值定义：使用 `example` 关键字定义 API 的示例值，用于测试和文档编写。
```api MyAPI {version 1.0path GET /usersparam String nameresponse 200 Stringexample {name: "John"}}```这些是 EasyAPI 的基本语法规则，你可以使用它来定义和描述你的网络 API。
easyapi常用命令
easyapi常用命令摘要：一、引言二、easyapi简介1.什么是easyapi2.easyapi的发展历程三、easyapi常用命令1.创建API接口2.调用API接口3.管理API接口4.设置API接口四、easyapi命令的实际应用1.创建API接口1.创建GET请求接口2.创建POST请求接口2.调用API接口1.调用GET请求接口2.调用POST请求接口3.管理API接口1.修改API接口2.删除API接口4.设置API接口1.设置API接口参数2.设置API接口限速五、easyapi的高级功能1.接口分组2.接口授权3.接口日志六、总结正文：一、引言随着互联网技术的快速发展，API接口已经成为软件开发中不可或缺的一部分。
easyapi作为一款强大的API管理工具，为广大开发者提供了方便快捷的API接口开发体验。
本文将为您介绍easyapi的常用命令，帮助您更好地使用easyapi进行API接口开发。
二、easyapi简介2.1 什么是easyapieasyapi是一款基于Node.js开发的轻量级API管理工具，它可以帮助开发者轻松创建、管理和调用API接口。
通过easyapi，开发者可以专注于业务逻辑的实现，而无需花费大量时间处理底层网络编程和API接口的实现。
2.2 easyapi的发展历程easyapi自发布以来，已经经历了多个版本的迭代更新。
每个版本都为开发者带来了更好的使用体验和更多的功能。
目前，easyapi已经广泛应用于各类项目中，成为开发者心目中的API管理神器。
三、easyapi常用命令3.1 创建API接口在easyapi中，创建API接口非常简单。
首先，需要安装并启动easyapi 服务。
然后，通过命令行或者编辑器创建API接口文件。
以下是一个创建GET 请求接口的示例：```easyapi:create /users/:id get```该命令表示创建一个名为`/users/:id`的GET请求接口。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
将config中的所有属性复制到obj中，如果配置了defaults，则先将defaults中的属性传入obj，然后再将config中属性传入，一般defaults用于定义一些默认值。
注意：每个参数都必须是对象object，而不能是function或其他。
创建object可以通过new function(){}、new Object()、{}等方法创建。
6、Ext.extend( Object subclass, Object superclass, [Object overrides] ) : void
实现对象继承，目前还不太了解具体原理 ？？？
7、space( String namespace1, String namespace2, String etc ) : void
// do something
},
// 为多个选择器添加相同的事件(mouseover)。在@之前使用逗号分开
'#foo a, #bar span.some-class@mouseover' : function(){
// do something
}
});
5、Ext.id( [Mixed el], [String prefix] ) : String
创建命名空间：
如space(&uot;Company&uot;,Function
用于返回一个空函数，便于在程序中创建空函数。Ext.emptyFn返回function(){}
3、Ext.applyIf(Object obj, Object config) : Object
功能如同Ext.apply,但是只把config中存在而obj不存在的属性复制过去。
返回一个唯一的id值。
如果只需要获取一个唯一的id值，则直接调用Ext.id()；
如果需要为某个元素设定一个唯一的id值并返回id则调用Ext.id(el)，el为元素Id、Dom对象或Ext的Element对象。
如果需要指定特定的前缀，则需要传入第二个参数，如Ext.id(el,”myPrix-”)，默认前缀为ext-gen，如默认返回id可能为ext-gen4，指定了前缀后可能返回myPrix-4。
4、Ext.addBehaviors( Object obj ) : void
为页面中一个或多个元素添加事件
元素使用css规则查找，其中元素与事件用@隔开
Ext.addBehaviors({
//为id为foo的元素下的所有a元素添加click事件
'#foo a@click' : function(e, t){