Extjs4 API文档阅读
ExtJS 4 官方指南：数据 Data 简体中文版
ExtJS 4 官方指南翻译：数据Data 数据包加载并保存您的应用程序中的所有数据。
它包括41类，但其中有三个，比其他的都, Store和有些支持的卫星类：1模型和存储Models and Stores让我们看看怎么创建一个Model：Ext.define('User',{extend:'Ext.data.Model',fields:[{ name:'id', type:'int'},{ name:'name', type:'string'}]});Models通常会用到Store，Store基本上是Models实例的一个集合。
建立一个Store和加载其数据很简单：Models are typically used with a Store, which is basically a collection of Model instances. Setting up a Store and loading its data is simple:Ext.create('Ext.data.Store',{model:'User',proxy:{type:'ajax',url :'users.json',reader:'json'},autoLoad:true});我们配置Store使用Ajax Proxy，告诉它加载数据的URL，并用一个Reader解析数据。
在这种情况下，我们的服务器返回JSON，所以我们创建一个JSON Reader来读取响应。
Store 从URL users.json中自动加载User model实例集合。
users.json URL应该返回一个JSON 字符串，看起来像这样：We configured our Store to use an Ajax Proxy, telling it the url to load data from andthe Reader used to decode the data. In this case our server is returning JSON, so we've set up a Json Reader to read the response. The store auto-loads a set of User model instances from the url users.json. The users.json url should return a JSON string that looks something like this:{success:true,users:[{ id:1, name:'Ed'},{ id:2, name:'Tommy'}]}Simple Store例子里有现场演示。
ext4说明帮助文档大全
ext4说明帮助⽂档⼤全Extjs ⽂件上传的实现⽅法发布时间：2011-03-22 来源：互联⽹作者：佚名点击：364上传⽂件要是⽤/doc/723208247.html的控件上传其实是很简单的问题，要是为了⽤户体验的提⾼很多的web开发⼈员都会采取很炫的ajax上传。
⼀般情况都使⽤flash的控件上传。
本⽂介绍使⽤EXTJS 实现⽂件的上传。
Extjs 要实现上传，需要⼀个js⽂件FileUploadField.js，在extjs类库⽂件⾥可以找到。
当然也可以使⽤Ext.ux.UploadDialog.Dialog这个插件来实现上传。
FileUploadField.js代码：1./*!2. * Ext JS Library3.2.03. * Copyright(c) 2006-2010 Ext JS, Inc.4. * licensing@/doc/723208247.html5. * /doc/723208247.html/license6. */7.Ext.ns('Ext.ux.form');8.9./**10. * @class Ext.ux.form.FileUploadField11. * @extends Ext.form.TextField12. * Creates a file upload field.13. * @xtype fileuploadfield14. */15.Ext.ux.form.FileUploadField = Ext.extend(Ext.form.TextField, {16./**17. * @cfg {String} buttonText The button text to display on the upload button (defaults to18. * 'Browse...'). Note that if you supply a value for {@link #buttonCfg}, the buttonCfg.text19. * value will be used instead if available.20. */21. buttonText: 'Browse...',22./**23. * @cfg {Boolean} buttonOnly True to display the file upload field as a button with no visible24. * text field (defaults to false). If true, all inherited TextField members will still be available.25. */26. buttonOnly: false,27./**28. * @cfg {Number} buttonOffset The number of pixels of space rese rved between the button and the text field29. * (defaults to 3). Note that this only applies if {@link #butt onOnly} = false.30. */31. buttonOffset: 3,32./**33. * @cfg {Object} buttonCfg A standard {@link Ext.Button} config object.34. */35.36.// private37. readOnly: true,38.39./**40. * @hide41. * @method autoSize42. */43. autoSize: Ext.emptyFn,44.45.// private46. initComponent: function(){47. Ext.ux.form.FileUploadField.superclass.initComponent.call(th is);48.49.this.addEvents(50./**51. * @event fileselected52. * Fires when the underlying file input field's value has changed from the user53. * selecting a new file from the system file selection d ialog.54. * @param {Ext.ux.form.FileUploadField} this55. * @param {String} value The file value returned by the underlying file input field56. */57.'fileselected'58. );59. },60.61.// private62. onRender : function(ct, position){63. Ext.ux.form.FileUploadField.superclass.onRender.call(this, c t, position);64.65.this.wrap = this.el.wrap({cls:'x-form-field-wrap x-form-file-wrap'});66.this.el.addClass('x-form-file-text');67.this.el.dom.removeAttribute('name');68.this.createFileInput();69.70.var btnCfg = Ext.applyIf(this.buttonCfg || {}, {71. text: this.buttonText72. });73.this.button = new Ext.Button(Ext.apply(btnCfg, {74. renderTo: this.wrap,75. cls: 'x-form-file-btn' + (btnCfg.iconCls ? ' x-btn-icon': '')76. }));77.78.if(this.buttonOnly){79.this.el.hide();80.this.wrap.setWidth(this.button.getEl().getWidth());81. }82.83.this.bindListeners();84.this.resizeEl = this.positionEl = this.wrap;85. },86.87. bindListeners: function(){88.this.fileInput.on({89. scope: this,90. mouseenter: function() {91.this.button.addClass(['x-btn-over','x-btn-focus'])92. },93. mouseleave: function(){94.this.button.removeClass(['x-btn-over','x-btn-focus','x-btn-click'])95. },96. mousedown: function(){97.this.button.addClass('x-btn-click')98. },99. mouseup: function(){100.this.button.removeClass(['x-btn-over','x-btn-focus' ,'x-btn-click']) 101. },102. change: function(){103.var v = this.fileInput.dom.value;104.this.setValue(v);105.this.fireEvent('fileselected', this, v);106. }107. });108. },109.110. createFileInput : function() {111.this.fileInput = this.wrap.createChild({112. id: this.getFileInputId(),113. name: /doc/723208247.html||this.getId(),114. cls: 'x-form-file',115. tag: 'input',116. type: 'file',117. size: 1118. });119. },120.121. reset : function(){122.this.fileInput.remove();123.this.createFileInput();124.this.bindListeners();125. Ext.ux.form.FileUploadField.superclass.reset.call(this); 126. },127.128.// private129. getFileInputId: function(){130.return this.id + '-file';131. },132.133.// private134. onResize : function(w, h){135. Ext.ux.form.FileUploadField.superclass.onResize.call(this, w, h);136.137.this.wrap.setWidth(w);138.139.if(!this.buttonOnly){140.var w = this.wrap.getWidth() - this.button.getEl().getW idth() - this.buttonOffset; 141.this.el.setWidth(w);142. }143. },144.145.// private146. onDestroy: function(){147. Ext.ux.form.FileUploadField.superclass.onDestroy.call(this) ;148. Ext.destroy(this.fileInput, this.button, this.wrap);149. },150.151. onDisable: function(){152. Ext.ux.form.FileUploadField.superclass.onDisable.call(this) ;153.this.doDisable(true);154. },155.156. onEnable: function(){157. Ext.ux.form.FileUploadField.superclass.onEnable.call(this); 158.this.doDisable(false); 159.160. },161.162.// private163. doDisable: function(disabled){164.this.fileInput.dom.disabled = disabled;165.this.button.setDisabled(disabled);166. },167.168.169.// private170. preFocus : Ext.emptyFn,171.172.// private173. alignErrorIcon : function(){174.this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]);175. }176.177.});178.179.Ext.reg('fileuploadfield', Ext.ux.form.FileUploadField);180.181.// backwards compat182.Ext.form.FileUploadField = Ext.ux.form.FileUploadField;HTML代码：1.:///doc/723208247.html/TR/xhtml1/DTD/xhtml1-transitional.dtd">2.3.4. 5. 6. 7. 8. 9.10.38.39. 108.。
{选篇}extjs中文API ln
extjs中文APIExtjs4 学习指南（仅供学习使用、转载需注明出处）Extjs4可用的学习资料少之又少，本文内容大部分为网络整理、方便学习者使用，如有出入以extjs4 api文档为准。
Extjs初步获取Extjs下载extjs：可以从/ 获得需要的extjs发布包及更多支持。
搭建学习环境：假设您的机器已经安装myeclipse和tomcat，如果没有请参阅其他相关资料。
myeclipse建立新Web project项目Extjs4并且将extjs4.0.7压缩包解压后的全部文件复制到项目的Webroot目录下Examples目录为ext官方提供的例子程序，其中可能包涵php的代码，错误信息可以暂时不理会。
部署并且启动tomcat，测试环境是否可用。
打开浏览器，输入http://localhost:8080/Ext4/index.html假设您的tomcat端口为8080您会看到以下界面，证明环境已经搭建成功！查看api文档http://localhost:8080/Ext4/docs/index.html查看示例页面http://localhost:8080/Ext4/examples/index.html测试例子开始...Webroot目录下建立hellowword.js 输入如下内容:再建立一个helloword.html,输入如下内容Html文件中只引入了一个css和2个js文件，注意引用路径和你建立文件路径是否能匹配，如果路径没有问题的话，打开浏览器输入http://localhost:8080/Ext4/helloworld.html您将会看到浏览器里显示一个panel，标题是Hello Ext,内容Hello! Welcome to Ext JS.，如果没有，请查看是否有路径不匹配。
其他：在ExtJS里最常用的,应该就是Ext.onReady和Ext.application这两个个方法了,而且它也可能是你学习ExtJS所接触的第一个方法,这个方法在当前的DOM加载完毕后自动调用,保证页面内的所有元素都能被Script所引用.可以尝试在这个方法中添加一条语句,看看页面打开后是什么反映（先建立js和html文件，将如下代码加入js文件中，html文件相应引入对应的js文件，本文档所有示例代码均如此方式运行以下不再重复）上面的代码将在页面加载完毕后弹出一对话框,打印出'hello world!'字样.获取元素还有一个常用的方法,就是获取页面上的元素了,ExtJS提供了一个get方法,可以根据ID取到页面上的元素:var myDiv = Ext.get('myDiv');会取到页面上ID为'myDiv'的元素.如果使用Element.dom的方法,则可以直接操作底层的DOM节点,Ext.get返回的则是一个Element对象.在不能使用这种方式来获取多个DOM的节点,或是要获取一些ID不一致,但又有相同特征的时候,可以通过选择器来进行获取,比如要获取页面上所有的标签,则可以使用:var ps = Ext.select('p');这样你就可以对所要获取的元素进行操作了,select()方法返回的是positeElement 对象,可以通过其中的each()方法对其所包含的节点进行遍历:当然,如果你要是对获取的所有元素进行相同的操作,可以直接应用于CompositeElement对象上,如:ps.highlight();或是:Ext.select('p').highlight();当然,select参数还可以更复杂一些,其中可以包括W3C Css3Dom选取器,基本的XPath,HTML 属性等,详细情况,可以查看DomQuery API的文档,来了解细节.事件响应获取到了元素,则可能会对一些元素的事件进行一些处理,比如获取一个按钮,我们为它添加一个单击事件的响应:复制代码代码如下:当然,你可以把事件的响应加到通过select()方法获取到的元素上:复制代码代码如下:WidgetsExtJS还提供了丰富的UI库来供大家使用.Extjs4布局详解Fit布局在Fit布局中，子元素将自动填满整个父容器。
ExtJS4应用架构设计简体中文版
Extjs4 应用架构设计应用的可扩展性、可维护性和灵活性取决于应用架构的质量。
不幸的是，这往往被视为马后炮。
概念设计和原型变成了大规模的应用，许多应用的基础基本就是示例代码的复制与粘贴，这很诱人，因为这可以让你在项目在开始阶段有一个快速的进度。
然而，节省下来的时间相对于项目后期的维护、扩展甚至重构应用的时间来说，算不得什么。
比较好的的方式是写一个可靠的架构，在实施前编写好遵循的约定和定义应用的视图、模型、存储和控制器等。
在这篇文章，我们将会看到一个受欢迎的应用并讨论如何构建用户接口，从而创建可靠的架构。
1 代码结构应用程序架构体系会为实际类和框架代码提供结构和一致性。
建立一个好的架构有以下主要好处：■ 每个应用的工作方式是相同的，因而你只需要学习一次。
■ 在应用之间很容易分享代码，因为工作方式是相同的。
■ 你可以使用ExtJS的生成工具为你的应用程序创建经过优化的发布版本。
在ExtJS 4创建你的应用时，应该考虑一下我们定义的约定，尤其是统一的目录结构。
这个结构要求所有类文件都放到app目录下，在该目录下，可根据命名空间建立model、view、controller和store等4个子目录。
虽然ExtJS 4提供了如何构建你的应用的最佳做法，但是你也可以根据自己需要修改我们建议的文件和类的命名约定，例如，你可以为你的控制器在“Controller” 前加上前缀，如“Users”修改为“UsersController”。
在这种情形下，记得给所有的控制器文件和类加前缀。
最重要的一点是，要在开始编写应用程序前定义好这些约定并遵守它。
这样，你就可以在任何需要的地方调用这些类。
我们强烈建议要遵model、view、controller和store这4个文件夹的命名约定，这可以确保你可以使用SDK Tools beta对应用进行优化。
2 寻找平衡点2.1 视图View将应用程序的UI分割成视图是好的开始。
ExtJS 4 官方指南翻译：Tree组件
1.Ext.create('Ext.tree.Panel', {2. renderTo: Ext.getBody(),3. title: 'Simple Tree',4. width: 150,5. height: 150,6. root: {7. text: 'Root',8. expanded: true,9. children: [10. {11. text: 'Child 1',12. leaf: true13. },14. {15. text: 'Child 2',16. leaf: true17. },18. {19. text: 'Child 3',20. expanded: true,21. children: [22. {23. text: 'Grandchild',24. leaf: true25. }26. ]27. }28. ]29. }30.});此树面板渲染到document.body元素上。
我们把定义的根节点（The Root Node）自动扩张开来，这是默认的情况。
根节点有三个子节点，其中前两个是leaf 节点，表示他们下面没有任何子节点（children）了（终结了）。
第三个节点是一个叶子节点，已经有一个child 的叶节点（one child leaf node）。
text 属性是节点的显示的文本。
可打开例子看看效果如何。
This Tree Panel renders itself to the document body. We defined a root node that is expanded by default. The root node has three children, the first two of which are leaf nodes which means they cannot have any children. The third node is not a leaf node and has has one child leaf node. The text property is used as the node's text label.See Simple Tree for a live demo.树面板的数据存储在TreeStore。
ExtJS 4 官方指南翻译：Drag and Drop 拖放 简体中文版
ExtJS 4 官方指南翻译：Drag and Drop 拖放分类：ExtJS 4.02011-10-26 17:03 454人阅读评论(0) 收藏举报原文：/ext-js/4-0/#!/guide/drag_and_drop翻译：frank/sp42 转载请保留本页信息1 拖放Drag and Drop在那么多的交互设计模式之中，“拖放（Drag andDrop）”模式可以说是开发者感觉比较不错的。
用户日常在进行拖放操作的时候，真的是连“想都不用想”地就可以进行拖放操作了，非常直观而且易学易用。
下文中的教程中，请跟随我们。
不是我们“大厥其词”，而是真的——只要将下面五个步骤的要义领会在心，拖放的话将不再是一件难事。
One of the most powerful interaction design patterns available to developers is "Drag and Drop." We utilize Drag and Drop without really giving it much thought - especially when its done right. Here are 5 easy steps to ensure an elegant implementation.2 拖放的定义Defining drag and drop拖动（drag）动作的发生，就是鼠标在某些UI 元素身上点击了，然后按着不放鼠标，进行鼠标移动的动作；放下（drop，或者称“置下”）动作的发生，就是拖动开始后，鼠标按钮松开了——也就是放下的动作。
宏观而言，拖放两者的操作可用下面的流程图来描述。
A drag operation, essentially, is a click gesture on some UI element while the mouse button is held down and the mouse is moved. A drop operation occurs when the mouse button is released after a drag operation. From a high level, drag and drop decisions can be summed up by the following flow chart.ExtJS本身就提供了Ext.dd以实现拖放的支持。
Extjs4分享手册
Extjs布局
Extjs布局分为容器布局和组件布局两大类。 容器布局：
组件布局：Dock、Tool、Field、TriggerField
容器布局
一、Auto layout 说明：组件在容器中原样排列
二、Anchor layout 说明：组件通过anchor属性，out 说明：继承自Anchor布局，可以同通过x、y 属性设置组件同容器左上角的距离。
如下页面：
获取id为text1的html控件：Ext.getDom(“text1”) 获取第一个input控件：Ext.query("input")[0] 获取id为text2的ext元素：Ext.get(“text2”) 获取id为textfield1的ext元素：Ext.get("textfield1") 获取id为textfield2的ext组件：Ext.getCmp(“textfield2”) 获取第一个textfield组件：ponentQuery.query(“textfield”)*0+ 获取textfiled1相邻的textfield2：Ext.getCmp("textfield1").next("textfield") 获取textfieldchild1的父panel：Ext.getCmp(“textfieldchild1”).up(“panel”) 获取panel下面的第一个textfield组件： ponentQuery.query("panel[title=Extjs控件]")[0].down("textfield")
Chapter：
Ext.define ('Chapter', { extend: 'Ext.data.Model', fields: [ {name: 'id', type: 'int'}, {name: 'number', type: 'int'}, {name: 'title', type: 'string'}, {name: 'bookId', type: 'int'} ] }); 说明：hasMany有以下的配置项 model ：关联对象的model名称 name:：关联的模型别名，用来获取关联对象数据，如果没有，默认为model名称加上“s” primaryKey ：主键，主对象用于关联的属性名称，默认为id foreignKey：外键，关联对象用于关联的属性名称，默认为关联对象model名称加上“_id” filterProperty ：过滤数据，只需要指定数据关联
看ExtJs API文档的阅读方法
看ExtJs API文档的阅读方法对EXT，下载一个ext2.0的API文件，叫你如何看懂API，看完保证就会用API，但是你必须看完。
Config OptionsPublic PropertiesPublic MethodsPublic Events基本上都由以上4部分组成Config Options下的内容为你在实例化一个对象时进行配置，也就是比如new Panel({a:"xxx",b:"yyy"})，这里的a和b就是来自于Config Options就拿tree下的TreeNode来说:Config Options下的checkedchecked : BooleanTrue to render a checked checkbox for this node, false to render an unchecked checkbox (defaults to undefined with no...True to render a checked checkbox for this node, false to render an unchecked checkbox (defaults to undefined with no checkbox rendered)TreeNode是树节点的意思，那么肯定也就是一个节点而checked很明显我们就能猜出来是是否选中的意思这个checked是在Confgi Options下的，是实例化的时候用的，注意这点，其他时候能否用你是不知道的而且这个配置选项的值必须只接受boolean类型的，也就是true或false比如 var root = new Ext.tree.TreeNode({checked:true});比如href : String 表示的配置选项href接受的类型是string的这个所谓的配置选项，也就是Config Options下的内容，只有你在实例化的时候用的，也就是你在new 类名({...})时用的然后你再看 Public Properties 部分看这个childNodes ，public properties下的childNodes : Array 这样写表示的是你从一个实例化对象里取得的属性，比如你刚才 var tn = newExt.tree.treeNode({....});这样已经实例化了一个对象了,那么现在你可以取实例化对象的数据了,怎么取呢，可以取里面的什么东西呢，那么这里public properties里的列出的就是你能取的,那么你要tn.childNodes就能获得一个Array类型的数据,所以public properties下列出的就是一个实例化对象能取的信息，冒号后面的是你索取得的信息的返回类型.Public Methods 再来看这个部分一般第一个都会是你实例化一个对象的构造方法TreeNode( Object/String attributes )表示的是这个构造方法可以接受两种类型的参数，一个是object类型的，一个是string类型的所谓的object类型的一般是这种模式{...}，而所谓的string类型就是"..." 再看appendChild( Node/Array node ) : Node 这个表示的是能接受的参数是Node类型或者Array类型的数据,注意看括号里面的括号里面的才是调用这个方法时需要传递进去的参数类型. 而冒号后面的那个Node的意思是你调用这个方法后返回的一个数据类型.比如var n = tn.appendChild(new Ext.tree.TreeNode({....}));那么是能够得到这个n的值的，并且这个n的值肯定就是Node类型的.接下来看Public Events部分:这部分的内容表示的是你在使用TreeNode类的时候可能出现的事件比如你对一个树节点进行添加子节点的操作，那么append事件就会发生,也就是在你var n = tn.appendChild(new Ext.tree.TreeNode({....}));运行这个代码的时候会发生append事件append : ( Tree tree, Node this, Node node, Number index )冒号后面的表示的是发生这个事件时会传递过来的数据.要记住和理解这点,那么事件是这样发生的，但是你如何捕获事件呢?就是通过两种方式:一种是on，一种是listeners,你可以在实例化一个类的时候为listeners配置选项赋值,比如var tn = newExt.tree.TreeNode({listeners:{"append":function(a,b,c,d){....}}})还有一种是你对这个实例进行on或addListener方法的调用,Public Methods 下面的on或addListener这个不是无缘无故出来的on( String eventName, Function handler, [Object scope], [Object options] ) : void 要知道这个事件捕获接受哪些参数,另外：js跟java是不一样的java的方法你传递的参数个数必须根定义的一样，但是js的并不需要 ,所以你在进行on方法的调用是可以传递不等同个数的参数,那么这里on( String eventName, Function handler, [Object scope], [Object options] ) : void可以只传递2个参数,一般情况下，这个api告诉你的是，[]这样括起来的表示你可以不传递的参数, 其他的最好传递进来所以你可以这样调用了. tn.on("append",function(){...})或者tn.on("append",hello);function hello(a,b,c,d){...}[Object scope], [Object options]这个是作用域一般就是传递this什么的,有时候会用到，特别是当你遇到一些问题时这个on或addListener方法的调用跟public events下的事件是挂钩的事件append : ( Tree tree, Node this, Node node, Number index ) 冒号后面表示的是事件发生时自动得到的信息所以，当在调用on方法时，on方法里handler参数就很关键了.Function handler 这里定义的方法将被调用，别且会将事件append : ( Tree tree, Node this, Node node, Number index ) 冒号后面表示的是事件发生时自动得到的信息的参数传递给它所以你在定义这个handler的时候就可以定义成接受( Tree tree, Node this, Node node, Number index ) 这4个类型的参数tree.on("click",function(node,event) 这里的function(node,event)可以单独拿出来event 就是事件，事件并不是作用在方法上，而是作用在对象上,只是,比如你想右键一个树节点后去调用某个方法在调用某些方法的时候触发了事件的发生:那么，你就可以tn.on("contextmenu",function(node,e){...})Public Events下面的东西只是定义了一些事件,而真正使用事件是你进行捕获,就是用on:另外on是addListener的简写，两个方法是一样的.看API各个配置选项或属性或方法或事件的右边,有个叫Defined By,列头 - Defined By,他表示的是这些信息是由哪个类定义的,因为你要知道ext中一个很重要的信息就是继承,所以有些方法或配置选项或属性都是来自于他的父类或超类,那么这个Defined By 就告诉了你是来自具体的哪个父类或超类这样在你看源码的时候就非常清晰然后Defined By 如果字体是黑色的表示这个配置选项或属性或方法或事件是他本身这个类定义的所以你一般去看一个类的特性的时候，你只需要去关注这个黑色文本的那些配置选项或属性或方法或事件然后我们再看看最上面的部分Class Ext.tree.TreeNodePackage: Ext.treeDefined In: TreeNode.jsClass: TreeNodeSubclasses: AsyncTreeNodeExtends: Node这里有Subclasses和ExtendsSubclasses表示这个类有哪些子类，Extends表示这个类继承自哪个类所以要说这点，是因为要说事件应用的限制只有那些继承了Observable类的类，也就是这个类是Observable的子类或子孙类，那么这个类才拥有事件处理机制，也就是才会有Public Events部分所以，如果自己扩展一个类，想拥有事件处理和响应机制，那么这个类就必须是这个Observable类的子类或子孙类可以一直点Extends后面的进去，最后肯定会出来我说的这个Observable类来源：/haoliansheng/archive/2009/05/15/1457277.html。
extjs-4-components
子组件通过容器的items加入到容器中，下面这个例子通过Ext.create方法创建了两var childPanel1 = Ext.create('Ext.panel.Panel', {title: 'Child Panel 1',html: 'A Panel'});var childPanel2 = Ext.create('Ext.panel.Panel', {title: 'Child Panel 2',html: 'Another Panel'});Ext.create('Ext.container.Viewport', {items: [ childPanel1, childPanel2 ]});容器通过“布局管理器(Layout Manager)”管理子组件的尺寸和位置。
关于布局和容器的详细内容可以查看《ExtJS 4 布局和容器》XTypes and Lazy Instantiation xtype和延迟加载每个组件都有⼀一个代称叫做xtype，例如Ext.panel.Panel的xtype是panel。
所有组件的xtype在API Docs for Component中有列出。
上面那个例子说明了如何添加已经初始化的组件到⼀一个容器中。
在大的应用中，这种方式是不可行的，因为这种方法需要每个组件都是初始化过的，但是大的应用中，由于使用的方式有些组件可能根本没有被用到（比如有100个页面的应用，⼀一个用户登录进来只操作了两个页面，这时把其他98个页面的组件全部初始化是不合理的），例如⼀一个用到TabPanel的应用，TabPanel的每个tab只当用户点击它的时候再渲染即可。
这就是引入xtype机制的原因，有了xtype可以让⼀一个容器的子组件事先定义好，到真正需要的时候再初始化。
ExtJS 4 官方指南翻译：容器与布局(Layouts and Containers)
ExtJS 4 官方指南翻译：容器与布局（Layouts and Containers）分类：ExtJS 4.02011-10-10 15:46 478人阅读评论(0) 收藏举报原文：/ext-js/4-0/#!/guide/layouts_and_containers翻译：frank/sp42 转载请保留本页信息布局系统是Ext JS 的最强大的部分之一。
它可以处理您的应用程序中的每个组件的大小和定位。
本指南介绍了如何进行布局的基础知识。
The layout system is one of the most powerful parts of Ext JS. It handles the sizing and positioning of every Component in your application. This guide covers the basics of how to get started with layouts.1 容器（Containers）Ext JS 程序所谓的UI，是由组件Component 组成的（参见《组件指南》。
容器Container 是一种特殊类型的组件，它可以包含其他组件。
一个典型的Ext JS 的应用程序是由不同的组件嵌套而成。
An Ext JS application UI is made up of Components (See the Components Guide for more on Components. A Container is a special type of Component that can contain other Components. A typical Ext JS application is made up of several layers of nested Components.最常用的容器是面板Panel。
ExtJS 4 官方指南：类系统 简体中文版
Ext JS 4类系统在历史上第一次，Ext JS的经历了一个在基础上的巨大重构，这就是新的类系统。
新架构的基础几乎每一个都是建立在Ext JS4.x写单个类上，因此在开始编码之前理解这个类系统是很重要的。
本手册适用于任何希望创造新的或扩大在现有的Ext JS 4.x类的开发者。
它分为4个部分：∙第一节：“概述”解释为什么需要一个强大的类系统∙第二节：“命名约定”讨论命名类，方法，属性，变量和文件的最佳做法。
∙第三节：“实践”提供了详细的一步一步的代码示例∙第四节：“错误的处理和调试”提供有用的提示和技巧，如何处理异常1概述Ext JS4有300多个类。
我们有超过20万开发者的巨大社区，他们来自世界各地，有各种编程背景。
在这种规模的框架中，我们面对的一个巨大挑战就是提供一个共同的代码架构。
这个架构要求：∙熟悉和简单易学∙能快速开发，调试方便，无痛部署∙精心组织，可扩展性和可维护性JavaScript是一个没有类的，原型为导向（prototype-oriented）的语言。
因此，JavaScript语言本质上最强大的功能之一是灵活性。
它可以使用许多不同的编码风格和技巧，以许多不同的方式做同样的工作。
然而，该功能也是不可预知的成本。
如果没有一个统一的结构，JavaScript代码会真的很难理解，维护和再利用。
另一方面，基于类（Class-based）编程，仍然停留OOP的最流行的模式。
基于类的语言，通常需要强类型，提供封装，标准的编码约定。
通常使得开发者坚持一个大原则，编写的代码更可能是可预见的、可延伸和可扩展的。
然而，他们却不具有JavaScript这样的语言的动态能力。
每种方法都有其自身的利弊，我们能否对各方都去其糟粕，取其精华？答案是肯定的，我们已经在Ext JS 4的解决方案中实现了。
2命名约定使用一致的命名约定作为所有类的代码基础，而命名空间和文件名有助于保持你的代码的组织，结构化和可读性。
EXT核心API详解(4~7)
EXT核心API详解EXT核心API详解(四)-Ext.DomQuery/DomHelper/Template javascriptExt.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.Element insertBefore( 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的内容Ext.Template类Template类主要是功能是生产html片断,例var t = new Ext.Template('<div >','<span >{name:trim} {value:ellipsis(10)}</span>','</div>');t.append('s ome-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.Element insertBefore( Mixed el, Object values, [Boolean returnElement] ) : HTMLElement/Ext.Element insertFirst( 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详解(五)- EventManager/EventObject/CompositeElementExt.EventManager事件管理者中的大部分方法都在Ext中有定义,主要用于事件管理addListener( String/HTMLElement el, String eventName, Function handler,on( String/HTMLElement el, String eventName, Function handler, [Object scope], [Object o ptions] ) : void onDocumentReady( Function fn, [Object scope], [boolean options] ) : voidremoveListener( String/HTMLElement el, String eventName, Function fn ) :un( String/HTMLElement el, String eventName, Function fn ) : Boolean参见ExtonWindowResize( Function fn, Object scope, boolean options ) : void窗口大小变更时触发onTextResize( Function fn, Object scope, boolean options ) : void活动文本尺寸变更时触发Ext.EventObject这两个类都定义在EventManager.js中，分开是为了逻辑上更清晰吧,这个类主要用于描述事件本身，一般用做事件处理方法的参数另外这个害定义了一些键值常量，比ascii码好记例function handleClick(e){ // 这儿的e就是一个EventObject对象e.preventDefault();var target = e.getTarget();...}var myDiv = Ext.get("myDiv");myDiv.on("click", handleClick);//orExt.EventManager.on("myDiv", 'click', handleClick);Ext.EventManager.addListener("myDiv", 'click', handleClick);getCharCode() : NumbergetKey() : Number在非webkit|khtml类型网页中这两个方法是一样的，得到按键的值getPageX() : NumbergetPageY() : NumbergetXY() : Array得到事件坐标getRelatedTarget() : HTMLElement得到关联目标?我总是得到nullgetTarget( [String selector], [Number/Mixed maxDepth], [Boolean returnEl] ) :如果没有定义selector则直接返回target属性,如果定义了selector，则利用selector寻找祖先节点getTime() : Number得到事件发生的时间?getWheelDelta() : Number应该是个过时的方法，反正在ie和火狐下都不知道做什么用的,原意应该是得到鼠标的按键信息？hasModifier() : Boolean事件发生时是否同时按下了ctrl/alt/shift键之一？preventDefault() : void阻止浏览器的默认事件？stopEvent() : voidpreventDefault+stopPropagationstopPropagation() : void阻止事件冒泡within( Mixed el, [Boolean related] ) : Boolean如果事件的目标是el或者它的子节点将返回真positeElement类基础的复合元素类,为容器中每个元素创建一个Ext.Element对象虽然不是继承自Ext.Element，但事实上它几乎支持Element类的所有方法例:var els = Ext.select("#some-el div.some-class", true);els.setWidth(100);add( String/Array els ) : CompositeElement添加css选择器els匹配的元素或元素组成的数组到当前对象clear() : void清除所有元素contains() : Boolean应该是contains(Mixed el):Boolean,当前复合元素中是否含有eleach( Function fn, [Object scope] ) : CompositeElement通过el,this,index参数为每个元素调用fnfill( String/Array els ) : CompositeElementclear()& add(els)filter( String selector ) : CompositeElement过滤first() : Ext.Element第一个元素getCount() : Number//元素的数量indexOf() : Boolean同contains一样应该有个Mixed参数item( Number index ) : Ext.Element第index个元素last() : Ext.Element最后一个元素removeElement( Mixed el, [Boolean removeDom] ) : CompositeElement删除el元素replaceElement( Mixed el, Mixed replacement, [Boolean domReplace] ) : CompositeElement替换positeElementLite由positeElement继承而来，重写了一些方法，但没看出与父类有什么不同EXT核心API详解(六)-Ext.Fx javascriptExt.Fx类对于我这样的懒鬼而言，Fx类是核心类库中最激动人心的一个类，它不是最重要的，却是最实用的一个类定义了一些常用的特效方法,不妨自己多动手试试下面的方法，很有趣的fadeIn( [Object options] ) : Ext.Element渐显options参数有以下属性callback:Function 完成后的回叫方法scope:Object 目标easing:String 行为方法默认值是:easeOut,可选值在ext_base中找到,但没有说明,以下内容从yahoo ui中找到的easeNone:匀速easeIn:开始慢且加速easeOut:开始快且减速easeBoth:开始慢且减速easeInStrong:开始慢且加速,t的四次方easeOutStrong:开始快且减速,t的四次方easeBothStrong:开始慢且减速,t的四次方elasticIn:elasticOut:elasticBoth:backIn:backOut:backBoth:bounceIn:bounceOut:bounceBoth:太多,慢慢体会吧afterCls:String 事件完成后元素的样式duration:Number 事件完成时间（以秒为单位）remove:Boolean 事件完成后元素销毁?useDisplay:Boolean 隐藏元素是否使用display或visibility属性?afterStyle.:String/Object/Function 事件完成后应用样式block:Boolean 块状化?concurrent:Boolean 顺序还是同时执行？stopFx ：Boolean 当前效果完成后随合的效果是否将停止和移除fadeOut( [Object options] ) : Ext.Element渐隐fadeOut和fadeIn能使用一个特别的endOpacity属性以指示结束时的透明度例:el.fadeIn({duration:5,endOpacity:0.7});frame( [String color], [Number count], [Object options] ) : Ext.Element边框变亮扩展然后渐隐例:el.frame("ff0000", 10, { duration: 3 })ghost( [String anchor], [Object options] ) : Ext.Element渐渐滑出视图,anchor定义tl 左上角(默认)t 上居中tr 右上角l 左边界的中央c 居中r 右边界的中央bl 左下角b 下居中br 右下角例:el.ghost('b', {easing: 'easeOut',duration: .5remove: false,useDisplay: false});hasActiveFx() : Boolean指示元素是否当前有特效正在活动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 endColor: (current color) or "ffffff",easing: 'easeIn',duration: 1});pause( Number seconds ) : Ext.Element暂停puff( [Object options] ) : Ext.Element吹，吹，吹个大气球，元素渐大并隐没例:el.puff({easing: 'easeOut',duration: .5,remove: false,useDisplay: false});scale( Number width, Number height, [Object options] ) : Ext.Element 缩放例:el.scale([element's width],[element's height], {easing: 'easeOut',duration: .35});sequenceFx()排队特效shift( Object options ) : Ext.Element位移,并可重置大小,透明度等例:el.shift({width: [element's width],height: [element's height],x: [element's x position],y: [element's y position],opacity: [element's opacity],easing: 'easeOut',duration: .35});slideIn( [String anchor], [Object options] ) : Ext.ElementslideOut( [String anchor], [Object options] ) : Ext.Element滑入/滑出例:el.slideIn('t', {easing: 'easeOut',duration: .5});stopFx() : Ext.Element停止特效switchOff( [Object options] ) : Ext.Element收起并隐没例:el.switchOff({easing: 'easeIn',duration: .3,remove: false,useDisplay: false});syncFx() : Ext.Element异步特效EXT核心API详解(七)-KeyNav/KeyMap/JSON/Format/.. javascriptExt.KeyNavExt的keyNav类能为Ext.Element元素提供简单的按键处理方法例:var el=Ext.get("textarea");new Ext.KeyNav(el, {"left" : function(e){alert("left key down");},scope : el});它的行为与KeyMap类似，但功能比KeyMap要弱小的多，只能处理以下已定义键enter/left/right/up/down/tab/esc/pageUp/pageDown/del/home/end同情一下KeyNav方法只有三个,不用多解释KeyNav( Mixed el, Object config )disable() : voidenable() : voidExt.KeyMap类则强悍的多,其中最重要的当然是对按键的定义更灵活例:上例用KeyMap来写可能是var el=Ext.get("textarea");new Ext.KeyMap(el, {key:Ext.EventObject.LEFT,fn: function(e){alert("left key down");},scope : el});方法KeyMap( Mixed el, Object config, [String eventName] )构造,与KeyNav也相似，但更灵活它是{key: String/Array, //可以是数字，字符，也可以是Ext.EventObject.LEFT这样的助记符,还能是他们组成的数组shift: Boolean, //ctrl键按下?ctrl: Boolean,alt : Boolean,fn : Function, //回叫方法scope: Object //范围}这样的对象或它们组成的数组比如{key: 10},{key: [10,13]},{key:'\t'},{key:'abcd'},{key:Ext.EventObject.LEFT}都是合法的定义addBinding( Object/Array config ) : void增加新的绑定动作config参见构造disable() : voidenable() : voidisEnabled() : Boolean允许，静止和状态查询on( Number/Array/Object key, Function fn, [Object scope] ) : void只添加一个处理时addBinding的快捷方式,但个人感觉并没有简单到哪儿去。
ExtJS 4 官方指南翻译：组件
ExtJS 4 官方指南翻译：组件ComponentsExtJS程序由不同的器件所组成，器件也称作“组件”。
所有组件皆是ponent其子类，目的在于能够参与生存周期的自动化管理，包括实例化、渲染、大小调整与定位、销毁的问题。
ExtJS不但直接提供了一个广阔且实用的组件模型，而且使得任意组件都可以轻松地扩展出新的组件。
An Ext JS application's UI is made up of one or many widgets called Component s. All Components are subclasses of the ponent class which allows them to participate in automated lifecycle management including instantiation, rendering, sizing and positioning, and destruction. Ext JS provides a wide range of useful Components out of the box, and any Component can easily be extended to create a customized Component.1 组件层次The Component Hierarchy容器是组件的一种特殊类型，用于承载其他组件之用。
一个典型的应用程序是由若干嵌套的组件而成，这有点像树状的结构。
容器负责管理子组件的生存周期，包括实例化、渲染、大小调整与定位、销毁的问题。
一个典型的组件层次以“视口Viewport ”为顶点，然后其他的容器或者组件嵌套于内：A Container is a special type of Component that can contain other Components. A typical application is made up of many nested Components in a tree-like structure that is referred to as the Component hierarchy. Containers are responsible for managing the Component lifecycle of their children, which includes creation, rendering, sizing and positioning, and destruction. A typical application's Component hierarchy starts with a Viewport at the top, which has other Containers and/or Components nested within it:可以通过容器的items 配置项来添加容器的子组件。
extjs核心api详解
/j2me/profile (1)EXT核心API详解(一)-Ext (1)EXT核心API详解(二)-Array/Date/Function/Number/String (9)EXT核心API详解(三)-Ext.Element (17)EXT核心API详解(四)-Ext.DomQuery/DomHelper/Template (40)EXT核心API详解(五)- (45)EXT核心API详解(六)-Ext.Fx (51)EXT核心API详解(七)- (54)EXT核心API详解Ext.data(八) -Connection/Ajax/Record (63)EXT核心API详解Ext.data(九)-DataProxy/HttpProxy/MemoryProxy/ScriptTagProxy (69)EXT核心API详解Ext.data(十)-DataReader/ArrayReader/JsonReader/XmlReader (71)EXT核心API详解Ext.data(十一)-Store (74)EXT核心API详解Ext.data(十二)-GroupingStore/JsonStore/SimpleStore (84)EXT核心API详解Ext.data(十三)-Tree/Node (89)EXT核心API详解Ext.widgets(十四)-Button,SplitButton,CycleButton (95)EXT核心API详解Ext.widgets(十五)-form(上) (107)EXT核心API详解Ext.widgets(十六)-form(下) (113)EXT核心API详解Ext.menu.Menu(十七) (126)EXT核心API详解Ext.Toolbar(十八) (139)EXT核心API详解Ext.widgets(十九)-grid(1) (145)EXT核心API详解Ext.widgets(二十)-grid(2) (156)/j2me/profileEXT核心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/Stringroot] ) :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/textnode/whi tespaceEXT核心API详解(二)-Array/Date/Function/Number/String Array类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);// 结果<divclass="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 至53 F 月的完整英文名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.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.另见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], [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() : 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.DDProxy initDDTarget( 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/Objectanimate] ) : 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包含自己EXT核心API详解(四)-Ext.DomQuery/DomHelper/Template 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 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 ) : 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的内容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/CompositeElementLite Ext.EventManager事件管理者中的大部分方法都在Ext中有定义,主要用于事件管理addListener( String/HTMLElement el, String eventName, Function handler,on( String/HTMLElement el, String eventName, Function handler, [Object scope], [Object options] ) : voidonDocumentReady( Function fn, [Object scope], [boolean options] ) : void removeListener( String/HTMLElement el, String eventName, Function fn ) :un( String/HTMLElement el, String eventName, Function fn ) : Boolean参见Ext。
NODE.JS Express 4 API 中文手册
Express 4.x API 中文手册express()创建一个Express 应用。
express()是一个由express模块导出的入口（top-level）函数。
内置方法express.static(root, [options])express.static是 Express 内置的唯一一个中间件。
是基于serve-static开发的，负责托管 Express 应用内的静态资源。
root参数指的是静态资源文件所在的根目录。
options对象是可选的，支持以下属性：关于此中间件的细节，请参考通过 Express 托管静态资源文件。
ApplicationThe app object conventionally denotes the Express application. Create it by calling thetop-level express() function exported by the Express module:The app object has methods for∙Routing HTTP requests; see for example, app.METHOD and app.param.∙Configuring middleware; see app.route.∙Rendering HTML views; see app.render.∙Registering a template engine; see app.engine.It also has settings (properties) that affect how the application behaves; for more information, see Application settings.Propertiesapp.localsThe app.locals object is a JavaScript object, and its properties are local variables within the application.Once set, the value of app.locals properties persist throughout the life of the application, in contrast with res.locals properties that are valid only for the lifetime of the request.You can access local variables in templates rendered within the application. This is useful for providing helper functions to templates, as well as app-level data. Note, however, that you cannot access local variables in middleware.app.mountpathThe app.mountpath property is the path pattern(s) on which a sub app was mounted.A sub app is an instance of express which may be used for handling the request to a route.It is similar to the baseUrl property of the req object,except req.baseUrl returns the matched URL path, instead of the matchedpattern(s).If a sub-app is mounted on multiple path patterns, app.mountpath returns the list of patterns it is mounted on, as shown in the following example.Eventsapp.on('mount', callback(parent))The mount event is fired on a sub-app, when it is mounted on a parent app. The parent app is passed to the callback function.Methodsapp.all(path, callback [, callback ...])This method is like the standard app.METHOD()methods, except it matches all HTTP verbs.It’s useful for mapping “global” logic for specific path prefixes or arbitrary matches. For example, if you put the following at the top of all other route definitions, it requires that all routes from that point on require authentication, and automatically load a user. Keep in mind that these callbacks do not have to act as end-points: loadUser can perform a task, then call next()to continue matching subsequent routes.Or the equivalent:Another example is white-listed “global” functionality. The example is much like before, however it only restricts paths that start with “/api”:app.delete(path, callback [, callback ...])Routes HTTP DELETE requests to the specified path with the specified callback functions. For more information, see the routing guide.You can provide multiple callback functions that behave just like middleware, except these callbacks can invoke next('route')to bypass the remaining route callback(s). You can use this mechanism to impose pre-conditions on a route, then pass control to subsequent routes if there’s no reason to proceed with the current route.app.disable(name)Sets the Boolean setting name to false, where name is one of the properties from the app settings table. Calling app.set('foo', false)for a Boolean property is the same as calling app.disable('foo').For example:app.disabled(name)Returns true if the Boolean setting name is disabled (false), where name is one of the properties from the app settings table.app.enable(name)Sets the Boolean setting name to true, where name is one of the properties from the app settings table. Calling app.set('foo', true)for a Boolean property is the same as calling app.enable('foo').app.enabled(name)Returns true if the setting name is enabled (true), where name is one of the properties from the app settings table.app.engine(ext, callback)Registers the given template engine callback as ext.By default, Express will require()the engine based on the file extension. For example, if you try to render a “foo.jade” file, Express invokes the following internally, and caches the require()on subsequent calls to increase performance.Use this method for engines that do not provide .__express out of the box, or if you wish to “map” a different extension to the template engine.For example, to map the EJS template engine to “.html” files:In this case, EJS provides a .renderFile()method with the same signature that Express expects: (path, options, callback), though note that it aliases this method as ejs.__express internally so i f you’re using “.ejs” extensions you don’t need to do anything.Some template engines do not follow this convention. The consolidate.js library maps Node template engines to follow this convention, so they work seemlessly with Express.app.get(name)Returns the value of name app setting, where name is one of strings in the app settings table. For example:app.get(path, callback [, callback ...])Routes HTTP GET requests to the specified path with the specified callback functions. For more information, see the routing guide.You can provide multiple callback functions that behave just like middleware, except these callbacks can invoke next('route')to bypass the remaining route callback(s). You can use this mechanism to impose pre-conditions on a route, then pass control to subsequent routes if there’s no reason to proceed with the current route.app.listen(port, [hostname], [backlog], [callback])Binds and listens for connections on the specified host and port. This method is identical to Node’s http.Server.listen().The app returned by express()is in fact a JavaScript Function, designed to be passed to Node’s HTTP servers as a callback to handle requests. This makes it easy to provide both HTTP and HTTPS versions of your app with the same code base, as the app does not inherit from these (it is simply a callback):The app.listen()method is a convenience method for the following (for HTTP only):app.METHOD(path, callback [, callback ...])Routes an HTTP request, where METHOD is the HTTP method of the request, such as GET, PUT, POST, and so on, in lowercase. Thus, the actual methodsare app.get(), app.post(), app.put(), and so on. See below for the complete list.For more information, see the routing guide.Express supports the following routing methods corresponding to the HTTP methods of the same names:∙checkout ∙connect∙copy∙delete∙get∙head∙lock∙merge∙mkactivity ∙mkcol∙move∙m-search∙notify∙options∙patch∙post∙propfind∙proppatch∙purge∙put∙report∙search∙subscribe∙trace∙unlock∙unsubscriTo route methods which translate to invalid JavaScript variable names, use the bracket notation. For example, app['m-search']('/', function ....You can provide multiple callback functions that behave just like middleware, except that these callbacks can invoke next('route')to bypass the remaining route callback(s). You can use this mechanism to impose pre-conditions on a route, then pass control to subsequent routes if there is no reason to proceed with the current route.The API documentation has explicit entries only for the most popular HTTPmethods app.get(), app.post(), app.put(), and app.delete(). However, the other methods listed above work in exactly the same way.There is a special routing method, app.all(), that is not derived from any HTTP method. It loads middleware at a path for all request methods.In the following example, the handler is executed for requests to “/secret” whether using GET, POST, PUT, DELETE, or any other HTTP request method.app.param([name], callback)Add callback triggers to route parameters, where name is the name of the parameter or an array of them, and function is the callback function. The parameters of the callback function are the request object, the response object, the next middleware, and the value of the parameter, in that order.If name is an array, the callback trigger is registered for each parameter declared in it, in the order in which they are declared. Furthermore, for each declared parameter except the last one, a call to next inside the callback will call the callback for the next declared parameter. For the last parameter, a callto next will call the next middleware in place for the route currently being processed, just like it would if name were just a string.For example, when :user is present in a route path, you may map user loading logic to automatically provide er to the route, or perform validations on the parameter input.Param callback functions are local to the router on which they are defined. They are not inherited by mounted apps or routers. Hence, param callbacks definedon app will be triggered only by route parameters defined on app routes.All param callbacks will be called before any handler of any route in which the param occurs, and they will each be called only once in a request-response cycle, even if the parameter is matched in multiple routes, as shown in the following examples.On GET /user/42, the following is printed:On GET /user/42/3, the following is printed:The behavior of the app.param(name, callback)method can be altered entirely by passing only a function to app.param(). This function is a custom implementation of how app.param(name, callback)should behave - it accepts two parameters and must return a middleware.The first parameter of this function is the name of the URL parameter that should be captured, the second parameter can be any JavaScript object which might be used for returning the middleware implementation.The middleware returned by the function decides the behavior of what happens when a URL parameter is captured.In this example, the app.param(name, callback)signature is modifiedto app.param(name, accessId). Instead of accepting a name and acallback,app.param()will now accept a name and a number.In this example, the app.param(name, callback)signature remains the same, but instead of a middleware callback, a custom data type checking function has been defined to validate the data type of the user id.The ‘.’ character can’t be used to capture a character in your capturing regexp. For example you can’t use '/user-.+/'to capture 'users-gami', use [\\s\\S]or[\\w\\W]instead (asin '/user-[\\s\\S]+/'.Examples:app.path()Returns the canonical path of the app, a string.The behavior of this method can become very complicated in complex cases of mounted apps: it is usually better to use req.baseUrl to get the canonical path of the app.app.post(path, callback [, callback ...])Routes HTTP POST requests to the specified path with the specified callback functions. For more information, see the routing guide.You can provide multiple callback functions that behave just like middleware, except that these callbacks can invoke next('route')to bypass the remaining route callback(s). You can use this mechanism to impose pre-conditions on a route, then pass control to subsequent routes if there’s no reason to proceed with the current route.app.put(path, callback [, callback ...])Routes HTTP PUT requests to the specified path with the specified callback functions. For more information, see the routing guide.You can provide multiple callback functions that behave just like middleware, except that these callbacks can invoke next('route')to bypass the remaining route callback(s). You can use this mechanism to impose pre-conditions on a route, then pass control to subsequent ro utes if there’s no reason to proceed with the current route.app.render(view, [locals], callback)Returns the rendered HTML of a view via the callback function. It accepts an optional parameter that is an object containing local variables for the view. It is like res.render(), except it cannot send the rendered view to the client on its own.Think of app.render()as a utility function for generating rendered view strings.Internally res.render()uses app.render()to render views.The local variable cache is reserved for enabling view cache. Set it to true, if you want to cache view during development; view caching is enabled in production by default.app.route(path)Returns an instance of a single route, which you can then use to handle HTTP verbs with optional middleware. Use app.route()to avoid duplicate route names (and thus typo errors).app.set(name, value)Assigns setting name to value, where name is one of the properties fromthe app settings table.Calling app.set('foo', true)for a Boolean property is the same ascalling app.enable('foo'). Similarly, calling app.set('foo', false)for a Boolean property is the same as calling app.disable('foo').Retrieve the value of a setting with app.get().Application SettingsIf name is one of the application settings, it affects the behavior of the application. The following table lists application settings.Options for `trust proxy` settingOptions for `etag` settinge([path,] function [, function...])Mounts the middleware function(s) at the path. If path is not specified, it defaults to “/”.A route will match any path, which follows its path immediately with a “/”. Forexample: e('/apple', ...)will match “/apple”, “/apple/images”, “/apple/images/news”, and so on.req.originalUrl in a middleware is a combination of req.baseUrl and req.path, as shown in the following example.Mounting a middleware at a path will cause the middleware function to be executed whenever the base of the requested path matches the path.Since path defaults to “/”, middleware mounted without a path will be executed for every request to the app.Middleware functions are executed sequentially, therefore the order of middleware inclusion is important.path can be a string representing a path, a path pattern, a regular expression to match paths, or an array of combinations thereof.function can be a middleware function, a series of middleware functions, an array of middleware functions, or a combination of all of them.Since router and app implement the middleware interface, you can use them as you would any other middleware function.Following are some examples of using the express.static middleware in an Express app.Serve static content for the app from the “public” directory in the application directory:Mount the middleware at “/static” to serve static content only when their request path is prefixed with “/static”:Disable logging for static content requests by loading the logger middleware after the static middleware:Serve static files from multiple directories, but give precedence to “./public” over the others:RequestThe req object represents the HTTP request and has properties for the request query string, parameters, body, HTTP headers, and so on. In this documentation and by convention, the object is always referred to as req (and the HTTP response is res) but its actual name is determined by the parameters to the callback function in which you’re working.For example:But you could just as well have:Propertiesreq.appThis property holds a reference to the instance of the express application that is using the middleware.If you follow the pattern in which you create a module that just exports a middleware in order for requiring it in your main file, then the middleware can access the express instance via req.appFor example:req.baseUrlThe URL path on which a router instance was mounted. For example:Even if you use a path pattern or a set of path patterns to load the router,the baseUrl property returns the matched string, not the pattern(s). In the following example, the greet router is loaded on two path patterns.When a request is made to /greet/jp, req.baseUrl is “/greet”. When a request is made to /hello/jp, req.baseUrl is “/hello”.req.baseUrl is similar to the mountpath property of the app object,except app.mountpath returns the matched path pattern(s).req.bodyContains key-value pairs of data submitted in the request body. By default, itis undefined, and is populated when you use body-parsing middleware suchas body-parser and multer.This example shows how to use body-parsing middleware to populate req.body.req.cookiesWhen using cookie-parser middleware, this property is an object that contains cookies sent by the request. If the request contains no cookies, it defaults to {}.For more information, issues, or concerns, see cookie-parser.req.freshIndicates whether the request is “fresh.” It is the opposite of req.stale.It is true if the cache-control request header doesn’t havea no-cache directive and any of the following is true:∙The if-modified-since request header is specifiedand last-modified request header is equal to or eariler thanthe modified response header.∙The if-none-match request header is *.∙The if-none-match request header, after being parsed into its directives, does not match the etag response header.For more information, issues, or concerns, see fresh.req.hostnameContains the hostname from the “Host” HTTP header.req.ipThe remote IP address of the request.If the trust proxy is setting enabled, it is the upstream address; see Express behind proxies for more information.req.ipsWhen the trust proxy setting is true, this property contains an array of IP addresses specified in the “X-Forwarded-For” request header. Otherwise, it contains an empty array.For example, if “X-Forwarded-For” is “client, proxy1, proxy2”,req.ips would be ["client", "proxy1", "proxy2"], where “proxy2” is the furthest downstream.For more information on the trust proxy setting, see app.set.req.originalUrlThis property is much like req.url; however, it retains the original request URL, allowing you to rewrite req.url freely for internal routing purposes. For example, the “mounting” feature of e()will rewrite req.url to strip the mount point.req.paramsAn object containing properties mapped to the named route “parameters”. For example, if you have the route /user/:name, then the “name” property is availableas . This object defaults to {}.When you use a regular expression for the route definition, capture groups are provided in the array using req.params[n], where n is the n th capture group. This rule is applied to unnamed wild card matches with string routes such as /file/*:req.pathContains the path part of the request URL.When called from a middleware, the mount point is not included in req.path. Look up e()for more details.req.protocolThe request protocol string, “http” or “https” when requested with TLS. When the “trust proxy”setting trusts the socket address, the value of the“X-Forwarded-Proto” header (“http” or “https”) field will be trusted and used if present.req.queryAn object containing a property for each query string parameter in the route. If there is no query string, it is the empty object, {}.req.routeThe currently-matched route, a string. For example:Example output from the previous snippet:req.secureA Boolean that is true if a TLS connection is established. Equivalent to:req.signedCookiesWhen using cookie-parser middleware, this property contains signed cookies sent by the request, unsigned and ready for use. Signed cookies reside in a different object to show developer intent; otherwise, a malicious attack could be placedon req.cookie values (which are easy to spoof). Note that signing a cookie does not make it “hidden” or encrypted; but simply prevents tampering (because the secret used to sign is private). If no signed cookies are sent, the property defaults to {}.For more information, issues, or concerns, see cookie-parser.req.staleIndicates whether the request is “stale,” and is the opposite of req.fresh. For more information, see req.fresh.req.subdomainsAn array of subdomains in the domain name of the request.req.xhrA Boolean value that is true if the request’s “X-Requested-With” header field is “XMLHttpRequest”, indicating that the request was issued by a client library such as jQuery.Methodsreq.accepts(types)Checks if the specified content types are acceptable, based on therequest’s Accept HTTP header field. The method returns the best match, or if none of the specified content types is acceptable, returns undefined(in which case, the application should respond with 406 "Not Acceptable").The type value may be a single MIME type string (such as “application/json”), an extension name such as “json”, a comma-delimited list, or an array. For a list or array, the method returns the best match (if any).For more information, or if you have issues or concerns, see accepts.req.acceptsCharsets(charset [, ...])Returns the first accepted charset of the specified character sets, based on the request’s Accept-Charset HTTP header field. If none of the specified charsets is accepted, returns false.For more information, or if you have issues or concerns, see accepts.req.acceptsEncodings(encoding [, ...])Returns the first accepted encoding of the specified encodings, based on the request’s Accept-Encoding HTTP header field. If none of the specified encodings is accepted, returns false.For more information, or if you have issues or concerns, see accepts.req.acceptsLanguages(lang [, ...])Returns the first accepted language of the specified languages, based on the request’s Accept-Language HTTP header field. If none of the specified languages is accepted, returns false.For more information, or if you have issues or concerns, see accepts.req.get(field)Returns the specified HTTP request header field (case-insensitive match).The Referrer and Referer fields are interchangeable.Aliased as req.header(field).req.is(type)Returns true if the incoming request’s “Content-Type” HTTP header field matches the MIME type specified by the type parameter. Returns false otherwise.For more information, or if you have issues or concerns, see type-is.req.param(name [, defaultValue])Deprecated. Use either req.params, req.body or req.query, as applicable.Return the value of param name when present.Lookup is performed in the following order:∙req.params∙req.body∙req.queryOptionally, you can specify defaultValue to set a default value if the parameter is not found in any of the request objects.Direct access to req.body, req.params, and req.query should be favoured for clarity - unless you truly accept input from each object.Body-parsing middleware must be loaded for req.param()to work predictably. Refer req.body for details. ResponseThe res object represents the HTTP response that an Express app sends when it gets an HTTP request.In this documentation and by convention, the object is always referred to as res (and the HTTP request is req) but its actual name is determined by the parameters to the cal lback function in which you’re working.For example:But you could just as well have:Propertiesres.appThis property holds a reference to the instance of the express application that is using the middleware.res.app is identical to the req.app property in the request object.res.headersSentBoolean property that indicates if the app sent HTTP headers for the response.res.localsAn object that contains response local variables scoped to the request, and therefore available only to the view(s) rendered during that request / response cycle (if any). Otherwise, this property is identical to app.locals.This property is useful for exposing request-level information such as the request path name, authenticated user, user settings, and so on.Methodsres.append(field [, value])res.append()is supported by Express v4.11.0+Appends the specified value to the HTTP response header field. If the header is not already set, it creates the header with the specified value.The value parameter can be a string or an array.Note: calling res.set()after res.append()will reset the previously-set header value.res.attachment([filename])Sets the HTTP response Content-Disposition header field to “attachment”. If a filename is given, then it sets the Content-Type based on the extension name via res.type(), and sets the Content-Disposition“filename=” parameter.res.cookie(name, value [, options])Sets cookie name to value. The value parameter may be a string or object converted to JSON.The options parameter is an object that can have the following properties.For example:The maxAge option is a convenience option for setting “expires” relative to the current time in milliseconds. The following is equivalent to the second example above.You can pass an object as the value parameter; it is then serialized as JSON and parsed by bodyParser()middleware.When using cookie-parser middleware, this method also supports signed cookies. Simply include the signed option set to true. Then res.cookie()will use the secret passed to cookieParser(secret)to sign the value.Later you may access this value through the req.signedCookie object.res.clearCookie(name [, options])Clears the cookie specified by name. For details about the options object, see res.cookie().res.download(path [, filename] [, fn])Transfers the file at path as an “attachment”. Typically, browsers will prompt the user for download. By default, the Content-Disposition header “filename=” parameter is path(this typically appears in the brower dialog). Override this default with the filename parameter.When an error ocurrs or transfer is complete, the method calls the optional callback function fn. This method uses res.sendFile()to transfer the file.res.end([data] [, encoding])Ends the response process. This method actually comes from Node core, specifically the response.end() method of http.ServerResponse.Use to quickly end the response without any data. If you need to respond with data, instead use methods such as res.send()and res.json().res.format(object)Performs content-negotiation on the Accept HTTP header on the request object, when present. It uses req.accepts()to select a handler for the request, based on the acceptable types ordered by their quality values. If the header is not specified, the first callback is invoked. When no match is found, the server responds with 406 “Not Acceptable”, or invokes the default callback.The Content-Type response header is set when a callback is selected. However, you may alter this within the callback using methods such as res.set()or res.type().The following example would respond with { "message": "hey" }whenthe Accept header field is set to “application/json” or “*/json” (however if it is “*/*”, then the response will be “hey”).In addition to canonicalized MIME types, you may also use extension names mapped to these types for a slightly less verbose implementation:res.get(field)Returns the HTTP response header specified by field. The match is case-insensitive.res.json([body])Sends a JSON response. This method is identical to res.send()with an object or array as the parameter. However, you can use it to convert other values to JSON, such as null, and undefined. (although these are technically not valid JSON).res.jsonp([body])Sends a JSON response with JSONP support. This method is identical to res.json(), except that it opts-in to JSONP callback support.By default, the JSONP callback name is simply callback. Override this withthe jsonp callback name setting.The following are some examples of JSONP responses using the same code:。
extjs核心api详解
(1)EXT核心API详解(一)-Ext (1)EXT核心API详解(二)-Array/Date/Function/Number/String (5)EXT核心API详解(三)-Ext.Element (9)EXT核心API详解(四)-Ext.DomQuery/DomHelper/Template (21)EXT核心API详解(五)- (24)EXT核心API详解(六)-Ext.Fx (27)EXT核心API详解(七)- (30)EXT核心API详解Ext.data(八) -Connection/Ajax/Record (35)EXT核心API详解Ext.data(九)-DataProxy/HttpProxy/MemoryProxy/ScriptTagProxy (38)EXT核心API详解Ext.data(十)-DataReader/ArrayReader/JsonReader/XmlReader .. 40EXT核心API详解Ext.data(十一)-Store (44)EXT核心API详解Ext.data(十二)-GroupingStore/JsonStore/SimpleStore (49)EXT核心API详解Ext.data(十三)-Tree/Node (51)EXT核心API详解Ext.widgets(十四)-Button,SplitButton,CycleButton (54)EXT核心API详解Ext.widgets(十五)-form(上) (61)EXT核心API详解Ext.widgets(十六)-form(下) (67)EXT核心API详解Ext.menu.Menu(十七) (74)EXT核心API详解Ext.Toolbar(十八) (80)EXT核心API详解Ext.widgets(十九)-grid(1) (83)EXT核心API详解Ext.widgets(二十)-grid(2) (89)EXT核心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 至 Saturday S 日期的英文顺序刻词尾,两个字符 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是否闰年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+stopPropagationpreventDefault {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], [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() : 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, on( String/HTMLElement el, String eventName, Function handler, [Object scope], [Object options] ) : voidonDocumentReady( Function fn, [Object scope], [boolean options] ) : void removeListener( String/HTMLElement el, String eventName, Function fn ) : un( String/HTMLElement el, String eventName, Function fn ) : Boolean 参见ExtonWindowResize( Function fn, Object scope, boolean options ) : void 窗口大小变更时触发onTextResize( Function fn, Object scope, boolean options ) : void活动文本尺寸变更时触发。
ext4.0ch01
ext4.0ch01第1章认识ExtJSExtJS是⽤JavaScript、CSS和HTML等技术实现的主要⽤于创建⽤户界⾯，且与后台技术⽆关的前端Ajax框架，还被⽤来开发RIA（富客户端）的Web应⽤。
ExtJS的UI组件模型和开发理念继承⾃Yahoo⽤户组件库YUI和Java平台上的Swing，它为开发者屏蔽了⼤量的Web UI操作以及跨浏览器⽅⾯的处理。
ExtJS要⽐开发者直接针对DOM和W3C对象模型开发Web UI快速⽽且轻松许多。
⽆论是从Web UI界⾯美观丰富上，还是从功能强⼤完善上来看，ExtJS都可算得上是Web UI组件库⽅⾯的佼佼者，也是⼀款不可多得的JavaScript客户端技术的精品之作。
本章内容提⽰：ExtJS的精彩表现ExtJS的前世今⽣是否真的需要学习ExtJSExtJS 4.0新特性ExtJS UI组件基础了解⼀下类似技术1.1 ExtJS的精彩表现“百闻不如⼀见”，这话对软件开发相关技术来说同样适⽤，特别是对于以UI闻名于世的ExtJS来说，实践将好过任何语⾔的描述。
⽽在所有ExtJS的UI组件中，Grid组件是使⽤最频繁、功能最复杂，同时也是实现最好的。
先来见识⼀下这个“⽆论是界⾯之精美，还是功能之强⼤”都⽆⼈能出其右的Grid组件吧！如图1-1所⽰，这就是ExtJS的Grid组件的⼀个展⽰效果。
从图中可以看出，Grid组件的界⾯基本上和桌⾯程序的Grid组件⼀样；从图上也能看出该组件的⼀些功能，在功能上相对于桌⾯程序的Grid组件，ExtJS的Grid组件也毫不逊⾊。
单选⾏、多选⾏，⾼亮显⽰选中的⾏，拖曳改变列宽度，按列排序，这些只能算Grid组件的基本功能。
⾃动⽣成⾏号，⽀持checkbox全选，动态选择显⽰哪些列，⽀持本地以及远程分页，可以对单元格按照⾃⼰的想法进⾏渲染，这些应该算⼀个功能较强的Grid组件应该拥有的功能，ExtJS的Grid组件也都拥有。
ext4.0学习文档
概念：（1）ExtJS是一个面向开发RIA也即富客户端的AJAX应用，是一个用javascript写的，主要用于创建前端用户界面，是一个与后台技术无关的前端ajax框架。
（以前是基于YAHOO-UI ,现在已经完全独立了）（2）之所以说是框架，因为它能够帮助我们在页面上快速而简单构建各种各样的控件，简化我们自己去写庞大js实现；它是一种纯面向对象的JS框架。
扩展性相当的好，可以自己写扩展，自己定义命名空间，web应用可能感觉太大，不过您可以根据需要按需动态的加载您想要的类库就可以了，避免了网络传输流量问题。
（3）它提供了丰富的，非常漂亮的外观体验，成为众多界面层开发人员的追捧，更重要的是它核心的组件基本覆盖了我们构建富客户端的常用的组件以及各种功能，在统计方面做的也非常出色。
（4）在3.0的时候提供了类似与dwr的方式调用后台代码，交互更加简单;4.0版本又提出了MVC模式的开发，支持组件化、模块插拔化设计以及提供本地数据源的支持。
第一章 EXTJS的基本概念1. 组件component : 能够以图形化形式呈现界面的类，其中还可以分为容器组件与元件组件。
∙容器组件:能够包含其它容器或者元件组件的类，其是进行单元化组件开发的基础∙元件组件：能图形化形式表现一个片面功能的组件，其不仅在实现了原有传统WEB程序的现有组件，而且还扩展了许多实用的组件，如刻度器、日历、树形列表等。
2. 类提供功能的非图形可形的类，它们为图形类提供了有力的支持按其功能可分为：数据支持类(Data)、拖放支持类（DD）、布局支持类（layout）、本地状态存储支持类（state）、实用工具类（Util）。
密封类：不能被扩展的类原型类：扩展了javascript标准类库中的类3. 方法作为类的功能体现，能够产生改变对象本身产生变化的直接因素方法按访问形式可分为公有方法与私有方法。
但由于javascript从原理上根本不支持这种结构，因此在EXTJS中，私有与公有方法完全凭借着用户自觉，没有像JAVA那样的强制性。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
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.类名应该包含在使用点号分隔的命名空间中。
至少，要有一个顶级命名空间。
例如：1.MyCompany.data.CoolProxyMyCompany.Application顶级命名空间和实际的类名应使用驼峰命名（CamelCased），其他则为小写。
例如：1.MyCompany.form.action.AutoLoad不是Sencha开发的类（即不是Ext自带的）不要使用Ext做为顶级命名空间。
缩写也要遵守以上的驼峰式命名约定。
例如：1.Ext.data.JsonProxy instead of Ext.data.JSONProxy2.MyCompany.util.HtmlParser instead of MyCompary.parser.HTMLParser3.MyCompany.server.Http instead of MyCompany.server.HTTP2) 代码文件类名对应类所在的文件（包括文件名）。
因此，每个文件应该只包含一个类（类名和文件名一样）。
例如：Ext.util.Observable 存放在path/to/src/Ext/util/Observable.jsExt.form.action.Submit 存放在path/to/src/Ext/form/action/Submit.jsMyCompany.chart.axis.Numeric 存放在path/to/src/MyCompany/chart/axis/Numeric.js path/to/src 是你的应用所在目录。
所有类都应该在这个通用根目录下，并且使用适当的命名空间以利于开发、维护和部署。
3）方法和变量•和类命名一样，方法和变量也只能包含字母和数字。
数字同样是允许但不建议，除非属于专业术语。
不要使用下划线，连字符等任何非字母数字符号。
•方法和变量名一样使用驼峰式命名，缩写也一样。
•举例•合适的方法名：encodeUsingMd5() getHtml() 代替getHTML()getJsonResponse() 代替getJSONResponse()parseXmlContent() 代替parseXMLContent()•合适的变量名：var isGoodNamevar base64Encodervar xmlReadervar httpServer4）属性∙类属性名称遵循以上的变量和方法命名约定.除非是静态的常量.∙类的静态属性常量应该全部大写。
例如：o Ext.MessageBox.YES = "Yes"o Ext.MessageBox.NO = "No"o MyCompany.alien.Math.PI = "4.13"三、DIY,,,1).声明1.1) 旧的方式如果你曾经使用过旧版本的extjs,那么你肯定熟悉使用Ext.extend来创建一个类:1: varMyWindow=Ext.extend(Object,{...});这个方法很容易从现有的类中继承创建新的类.相比直接继承,我们没有好用的API用于类创建的其他方面,诸如:配置、静态方法、混入（Mixins）。
呆会我们再来详细的重新审视这些方面。
现在，让我们来看看另一个例子：1: My.cool.Window = Ext.extend(Ext.Window, { ... });在这个例子中，我们创建我们的新类，继承Ext.Window，放在命名空间中。
我们有两个问题要解决：1，在我们访问My.cool的Window属性之前,My.cool必须是一个已有的对象.2,Ext.Window必须在引用之前加载.第一个问题通常使用space(别名Ext.ns)来解决.该方法递归创建(如果该对象不存在)这些对象依赖.比较繁琐枯燥的部分是你必须在Ext.extend之前执行Ext.ns来创建它们.1: Ext.ns('My.cool');2: My.cool.Window = Ext.extend(Ext.Window, { ... });第二个问题不好解决,因为Ext.Window可能直接或间接的依赖于许多其他的类,依赖的类可能还依赖其它类...出于这个原因,在ext4之前,我们通常引入整个ext-all.js,即使是我们只需要其中的一小部分.1.2) 新的方式在Extjs4中,你只需要使用一个方法就可以解决这些问题:Ext.define.以下是它的基本语法:1: Ext.define(className, members, onClassCreated);∙className: 类名∙members:代表类成员的对象字面量(键值对,json)onClassCreated: 可选的回调函数,在所有依赖都加载完毕,并且类本身建立后触发.由于类创建的新的异步特性,这个回调函数在很多情况下都很有用.这些在第四节中将进一步讨论例如:1: Ext.define('My.sample.Person', {2: name: 'Unknown',3:4: constructor: function(name) {5:if (name) {6: = name;7: }8:9:return this;10: },11:12: eat: function(foodType) {13: alert( + " is eating: " + foodType);14:15:return this;16: }17: });18:19:var aaron = Ext.create('My.sample.Person', 'Aaron');20: aaron.eat("Salad"); // alert("Aaron is eating: Salad");注意我们使用Ext.create()方法创建了My.sample.Person类的一个新实例.我们也可以使用新的关键字(new My.sample.Person())来创建.然而,建议养成始终用Ext.create来创建类示例的习惯,因为它允许你利用动态加载的优势.更多关于动态加载信息,请看入门指南:入门指南2).配置在ExtJS 4 ,我们引入了一个专门的配置属性,用于提供在类创建前的预处理功能.特性包括:∙配置完全封装其他类成员∙getter和setter.如果类没有定义这些方法,在创建类时将自动生成配置的属性的getter和setter方法。
∙同样的,每个配置的属性自动生成一个apply方法.自动生成的setter方法内部在设置值之前调用apply方法.如果你要在设置值之前自定义自己的逻辑,那就重载apply方法.如果apply没有返回值,则setter不会设置值.看下面applyTitle的例子:1: Ext.define('My.own.Window', {2:/** @readonly */3: isWindow: true,4:5: config: {6: title: 'Title Here',7:8: bottomBar: {9: enabled: true,10: height: 50,11: resizable: false12: }13: },14:15: constructor: function(config) {16:this.initConfig(config);17:18:return this;19: },20:21: applyTitle: function(title) {22:if (!Ext.isString(title) || title.length === 0) {23: alert('Error: Title must be a valid non-empty string');24: }25:else {26:return title;27: }28: },29:30: applyBottomBar: function(bottomBar) {31:if (bottomBar && bottomBar.enabled) {32:if (!this.bottomBar) {33:return Ext.create('My.own.WindowBottomBar', bottomBar);34: }35:else {36:this.bottomBar.setConfig(bottomBar);37: }38: }39: }40: });以下是它的用法:1:var myWindow = Ext.create('My.own.Window', {2: title: 'Hello World',3: bottomBar: {4: height: 605: }6: });7:8: alert(myWindow.getTitle()); // alerts "Hello World"9:10: myWindow.setTitle('Something New');11:12: alert(myWindow.getTitle()); // alerts "Something New"13:14: myWindow.setTitle(null); // alerts "Error: Title must be a valid non-empty string"15:16: myWindow.setBottomBar({ height: 100 }); // Bottom bar's height is changed to 1003.Statics静态成员可以使用statics配置项来定义1: Ext.define('Computer', {2: statics: {3: instanceCount: 0,4: factory: function(brand) {5:// 'this' in static methods refer to the class itself6:return new this({brand: brand});7: }8: },9:10: config: {11: brand: null12: },13:14: constructor: function(config) {15:this.initConfig(config);16:17:// the 'self' property of an instance refers to its class18:this.self.instanceCount ++;19:20:return this;21: }22: });23:24:var dellComputer = Computer.factory('Dell');25:var appleComputer = Computer.factory('Mac');26:27:alert(appleComputer.getBrand()); // using the auto-generated getter to get the value of a config property. Alerts "Mac"28:29: alert(Computer.instanceCount); // Alerts "2"四.错误处理&调试Extjs 4包含一些有用的特性用于调试和错误处理.你可以使用Ext.getDisplayName()来显示任意方法的名字.这对显示抛出异常的类和方法非常有用.1:throw new Error('['+ Ext.getDisplayName(arguments.callee) +'] Some message here');当使用Ext.define()定义的类中的方法抛出异常后.你将在调用堆栈中看到类和方法名(如果你使用webkit).例如,以下是chrome浏览器的效果:javascript是一种类无关（原文：classless）、基于原型的语言。