ExtJs使用总结（非常详细）

一、获取元素（Getting Elements）
1.Ext.get
var el = Ext.get（"myElementId"）;//获取元素，等同于document.getElementById（"myElementId"）;//会缓存
2. Ext.fly
var el = Ext.fly（"myElementId"）//不需要缓存。
注：享元模式（Flyweight Design Pattern）是一种节省内存的模式，该模式的大概原理是建立单个全体对象然后不断反复使用它。
3.Ext.getDom
var elDom = Ext.getDom（"elId"）; // 依据id来查dom节点
var elDom1 = Ext.getDom（elDom）; // 依据dom节点来查dom节点

二、CSS元素
4.addClass
Ext.fly（"elId"）.addClass（"myCls"）; // 加入元素的"myCls"的样式
5.radioClass
Ext.fly（"elId"）.radioClass（"myCls"）;//添加一个或多个className到这个元素，并移除其所有侧边（siblings）节点上的同名样式。
6.removeClass
Ext.fly（"elId"）.removeClass（"myCls"）; // 移除元素的样式
7.toggleClass
Ext.fly（"elId"）.toggleClass（"myCls"）; // 加入样式
Ext.fly（"elId"）.toggleClass（"myCls"）; // 移除样式
Ext.fly（"elId"）.toggleClass（"myCls"）; // 再加入样式
8.hasClass
if （Ext.fly（"elId"）.hasClass（"myCls"）） {//判断是否已加上这个样式
// 是有样式的……
}
10.replaceClass
Ext.fly（"elId"）.replaceClass（"myClsA", "myClsB"）;//替换样式
11.getStyle
var color = Ext.fly（"elId"）.getStyle（"color"）;//返回该元素的统一化当前样式和计算样式。
var zIndx = Ext.fly（"elId"）.getStyle（"z-index"）;//返回该元素的统一化当前样式和计算样式。
12.setStyle
Ext.fly（"elId"）.setStyle（{
display : "block",
overflow : "hidden",
cursor : "pointer"
}）;//设置元素的样式，也可以用一个对象参数包含多个样式。
13.getColor
Ext.fly（"elId"）.getColor（"color"）;//为指定的CSS属性返回CSS颜色
14.setOpacity

Ext.fly（"elId"）.setOpacity（.45, true）;//设置元素的透明度。
15.clearOpacity
Ext.fly（"elId"）.clearOpacity（）;//清除这个元素的透明度设置

三、Dom游历
16.Ext.fly（"elId"）.select（"li:nth-child（2n）"）.addClass（"red"）;
17.is 测试当前元素是否与传入的选择符相符一致。
复制代码代码如下:
var el = Ext.get（"elId"）;
if （el.is（"p.myCls"）） {
// 条件成立
}

18.findParent
定位于此节点，以此节点为起点，向外围搜索外层的父节点，搜索条件必须符合并匹配传入的简易选择符。
Ext.fly（"elId"）.findParent（"div"）; // 返回dom节点
Ext.fly（"elId"）.findParent（"div", 4）; // 查找4个节点
Ext.fly（"elId"）.findParent（"div", null, true）; // 返回Ext.Element
19.findParentNode
定位于此节点的“父节点”，以此节点的“父节点”为起点，向外围搜索外层的“父父”节点，搜索条件必须符合并匹配传入的简易选择符。
Ext.fly（"elId"）.findParentNode（"div"）;
20.up
沿着DOM，向外围搜索外层的“父父”节点，搜索条件必须符合并匹配传入的简易选择符。
Ext.fly（"elId"）.up（"div"）;
Ext.fly（"elId"）.up（"div", 5）; // 限5层的内查找
21.select
传入一个CSS选择符的参数，然后依据该CSS选择符从当前元素下面，形成期待匹配子节点的集合，也就是“选择”的操作，最后以一个Ext.CompositeElement类型的组合元素的形式返回。如果以Ext.select（）调用表示从document可是搜索。
// 返回结果的CompositeElement
Ext.fly（"elId"）.select（"div:nth-child（2）"）;
// 返回数组
Ext.fly（"elId"）.select（"div:nth-child（2）",
true）;
// 整个document都会搜索
Ext.select（"div:nth-child（2）"）;
22.query
进行一次query的查询，返回DOM 节点组成的数组。可选地第二参数设置为查询的起点，如不指定则为 document。
// 返回dom节点组成的数组
Ext.query（"div:nth-child（2）"）;
23.child
基于送入的选择符，不限定深度进行搜索，符合的话选取单个子节点。
Ext.fly（"elId"）.child（"p.highlight"）; // 返回的类型是Ext.Element
Ext.fly（"elId"）.child（"p.highlight", true）; // 返回dom节点
24.down
基于该选择符，"直接"选取单个子节点。
Ext.fly（"elId"）.down（"span"）; // 返回的类型是Ext.Element
Ext.fly（"elId"）.down（"span", true）; // 返回dom节点

25.parent
返回当前节点的那个父节点，可选地可送入一个期待的选择符。
// 返回父节点，类型是Ext.Element
Ext.fly（"elId"）.parent（）;
// 返回父节点，类型是html dom
Ext.fly（"elId"）.parent（"", true）;
// 返回父级节点，但一定要是div的，找到就返回，类型是Ext.Element
Ext.fly（"elId"）.parent（"div"）;
26.next
获取下一个侧边节点，跳过文本节点。可选地可送入一个期待的选择符。
// 返回下一个侧边节点，类型是Ext.Element
Ext.fly（"elId"）.next（）;
// 返回下一个侧边节点，类型是html dom
Ext.fly（"elId"）.next（"", true）;
// 返回下一个侧边节点，但一定要是div的，找到就返回，类型是Ext.Element
Ext.fly（"elId"）.next（"div"）;
27.prev
获取上一个侧边节点，跳过文本节点。可选地可送入一个期待的选择符。
// 返回上一个侧边节点，类型是Ext.Element
Ext.fly（"elId"）.prev（）;
// 返回上一个侧边节点，类型是html dom
Ext.fly（"elId"）.prev（"", true）;
// 返回上一个侧边节点，但一定要是div的，找到就返回，类型是Ext.Element
Ext.fly（"elId"）.prev（"div"）;
28.first
获取第一个侧边节点，跳过文本节点。可选地可送入一个期待的选择符。
// 返回第一个侧边节点，类型是Ext.Element
Ext.fly（"elId"）.first（）;
// 返回第一个侧边节点，类型是html dom
Ext.fly（"elId"）.first（"", true）;
// 返回第一个侧边节点，但一定要是div的，找到就返回，类型是Ext.Element
Ext.fly（"elId"）.first（"div"）;
29.last
获取最后一个侧边节点，跳过文本节点。可选地可送入一个期待的选择符。
// 返回最后一个侧边节点，类型是Ext.Element
Ext.fly（"elId"）.last（）;
// 返回最后一个侧边节点，类型是html dom
Ext.fly（"elId"）.last（"", true）;
// 返回最后一个侧边节点，但一定要是div的，找到就返回，类型是Ext.Element
Ext.fly（"elId"）.last（"div"）;

四、DOM操控（DHTML常见的一项任务就是DOM元素的增、删、改、查）
30.appendChild
把送入的元素归为这个元素的子元素。
var el = Ext.get（"elId1"）;
// 用id指定
Ext.fly（"elId"）.appendChild（"elId2"）;
// Ext.Element添加
Ext.fly（"elId"）.appendChild（el）;
// 选择符组合地添加
Ext.fly（"elId"）.appendChild（["elId2","elId3"]）;
// 直接添加dom节点
Ext.fly（"elId"）.appendChild（el.dom）;
// 添加CompositeElement，一组的div
Ext.fly（"elId"）.appendChild（Ext.select（"div"））;
31.appendTo
把这个元素添加到送入的元素里面。
var el = Ext.get（"elId1"）;
// "elId"添加到"elId2"里面
Ext.fly（"elId"）.appendTo（"elId2"）;
Ext.fly（"elId"）.appendTo（el）; //
添加到Ext.Element el
32.insertBefore
传入一个元素的参数，将其放置在当前元素之前的位置。
var el = Ext.get（"elId1"）;
// dom节点在前面插入
Ext.fly（"elId"）.insertBefore（"elId2"）;
//Ext.Element el在前面插入
Ext.fly（"elId"）.insertBefore（el）;
33.insertAfter
传入一个元素的参数，将其放置在当前元素之后的位置。
var el = Ext.get（"elId1"）;
// dom节点在后面插入
Ext.fly（"elId"）.insertAfter（"elId2"）;
// Ext.Element el在后面插入
Ext.fly（"elId"）.insertAfter（el）;
34.insertFirst
可以是插入一个元素，也可以是创建一个元素（要创建的话请使用“DomHelper配置项对象”作为参数传入），总之，这个元素作为当前元素的第一个子元素出现。
var el = Ext.get（"elId1"）;
// 插入的dom节点作为第一个元素
Ext.fly（"elId"）.insertFirst（"elId2"）;
// 插入的Ext.Element作为第一个元素
Ext.fly（"elId"）.insertFirst（el）;
// 用DomHelper配置项创建新节点，新节点会作为第一个子元素被插入。
Ext.fly（"elId"）.insertFirst（{
tag: "p",
cls: "myCls",
html: "Hi I am the new first child"
}）;
35.replace
用于当前这个元素替换传入的元素。
var el = Ext.get（"elId1"）;
// "elId"去替换"elId2"
Ext.fly（"elId"）.replace（"elId2"）;
// "elId"去替换"elId1"
Ext.fly（"elId"）.replace（el）;
36.replaceWith
用传入的元素替换这个元素。参数可以是新元素或是要创建的DomHelper配置项对象。
var el = Ext.get（"elId1"）;
Ext.fly（"elId"）.replaceWith（"elId2"）; // "elId2"替换掉"elId".
Ext.fly（"elId"）.replaceWith（el）; //
"elId1"替换掉"elId"
// 用DomHelper配置项创建新节点，并用该节点换掉‘elId"。
Ext.fly（"elId"）.replaceWith（{
tag: "p",
cls: "myCls",
html: "Hi I have replaced elId"
}）;

五、DomHelper配置项
37.createChild
传入一个DomHelper配置项对象的参数，将其创建并加入到该元素。
var el = Ext.get（"elId"）;
var dhConfig = {
tag: "p",
cls: "myCls",
html: "Hi I have replaced elId"
};
// 创建新的节点，放到"elId"里面
el.createChild（dhConfig）;
// 创建新的节点，居el第一个子元素之前
el.createChild（dhConfig, el.first（））;
38.wrap
创建一个新的元素，包裹在当前元素外面。
Ext.fly（"elId"）.wrap（）; // div包着elId
// 用新建的一个元素来包着elId
Ext.fly（"elId"）.wrap（{
tag: "p",
cls: "myCls",
html: "Hi I have replaced elId"
}）;

六、Html片断
38.insertHtml
插入HTML片断到这个元素。至于要插入的html放在元素的哪里，你可指定beforeBegin, beforeEnd, afterBegin, afterEnd这几种。第二个参数是插入HTML片断，第三个参数是决定是否返回一个Ext.Element类型的DOM对象。
Ext.fly（"elId"）.insertHtml（
"beforeBegin",
"<p><a href="anotherpage.html">点击我</a></p>"
）; // 返回dom节点
Ext.fly（"elId"）.insertHtml（
"beforeBegin",
"<p><a href="anotherpage.html">点击我</a></p>",
true
）; // 返回Ext.Element
39.remove
从DOM里面移除当前元素，并从缓存中删除。.
Ext.fly（"elId"）.remove（）; //
elId在缓存和dom里面都没有
40.removeNode
移除document的DOM节点。如果是body节点的话会被忽略。
Ext.removeNode（node）; // 从dom里面移除（HTMLElement）

七、Ajax
41.load
直接访问Updater的Ext.Updater.update（）方法（相同的参数）。参数与Ext.Updater.update（）方法的一致。
Ext.fly（"elId"）.load（{url: "serverSide.php"}）
42.getUpdater
获取这个元素的UpdateManager。
var updr = Ext.fly（"elId"）.getUpdater（）;
updr.update（{
url: "http://myserver.com/index.php",
params: {
param1: "foo",
param2: "bar"
}
}）;

八、事件控制Event Handling
43.addListener/on
为此元素加入一个事件处理函数。on（）是其简写方式。简写方式作用等价，写代码时更省力。
var el = Ext.get（"elId"）;
el.on（"click", function（e,t） {
// e是一个标准化的事件对象（Ext.EventObject）
// t就是点击的目标元素，这是个Ext.Element.
// 对象指针this也指向t
}）;
44.removeListener/un
从这个元素上移除一个事件处理函数。un（）是它的简写方式。
var el = Ext.get（"elId"）;
el.un（"click", this.handlerFn）;
// 或
el.removeListener（"click", this.handlerFn）;
45.Ext.EventObject
EventObject呈现了统一各浏览器的这么一个事件模型，并尽量符合W3C的标准方法。
// e它不是一个标准的事件对象，而是Ext.EventObject。
function handleClick（e）{
e.preventDefault（）;
var target = e.getTarget（）;
...
}
var myDiv = Ext.get（"myDiv"）;
myDiv.on（"click", handleClick）;
// 或
Ext.EventManager.on（"myDiv", "click", handleClick）;
Ext.EventManager.addListener（"myDiv", "click", handleClick）;

九、高级事件功能
46.委托delegation
要使用事件委托的方式代替，在容器身上登记一个事件处理器，按照依附的逻辑选择：
Ext.fly（"actions"）.on（"click, function（e,t） {
switch（t.id） {
case ""btn-edit":
// 处理特定元素的事件具体过程
break;
case "btn-delete":
// 处理特定元素的事件具体过程
break;
case "btn-cancel":
// 处理特定元素的事件具体过程
break;
}
}）;

47.委托化delegate
你在登记事件的处理器的时候可以加入配置这个选项。一个简易选择符，用于过滤目标元素，或是往下一层查找目标的子孙。
el.on（"click", function（e,t） {
// 执行事件具体过程
}, this, {
// 对子孙"clickable"有效
delegate: ".clickable"
}）;
48.翻转hover
这是一个Ext的翻转菜单的实例：
// handles when the mouse enters the element
function enter（e,t）{
t.toggleClass（"red"）;
}
// handles when the mouse leaves the element
function leave（e,t）{
t.toggleClass（"red"）;
}
// subscribe to the hover
el.hover（over, out）;
49.移除事件句柄removeAllListeners
在该元素身上移除所有已加入的侦听器。
el.removeAllListeners（）;
50.是否一次性触发single
你在登记事件的处理器的时候可以加入配置这个选项。true代表为事件触发后加入一个下次移除本身的处理函数。
el.on（"click", function（e,t） {
// 执行事件具体过程
}, this, {
single: true // 触发一次后不会再执行事件了
}）;
51.缓冲buffer
你在登记事件的处理器的时候可以加入配置这个选项。若指定一个毫秒数会把该处理函数安排到Ext.util.DelayedTask延时之后才执行。如果事件在那个事件再次触发，则原处理器句柄将不会被启用，但是新处理器句柄会安排在其位置。
el.on（"click", function（e,t） {
// 执行事件具体过程
}, this, {
buffer: 1000 // 重复响应事件以一秒为时间间隔
}）;
52.延时delay
你在登记事件的处理器的时候可以加入配置这个选项。制定触发事件后处理函数延时执行的时间。
el.on（"click", function（e,t） {
// 执行事件具体过程
}, this, {
// 延迟事件，响应事件后开始计时（这里一秒）
delay: 1000
}）;
53.目标target
你在登记事件的处理器的时候可以加入配置这个选项。如果你想另外指定另外一个目标元素，你可以在这个配置项上面设置。这可保证在事件上报阶段中遇到这个元素才会执行这个处理函数。
复制代码代码如下:
el.on（"click", function（e,t） {
// 执行事件具体过程
}, this, {
// 遇到里头的第一个"div"才会触发事件
target: el.up（"div"）
}）;

十、尺寸&大小
54.getHeight
返回元素的偏移（offset）高度。
var ht = Ext.fly（"elId"）.getHeight（）;
55.getWidth
返回元素的偏移（offset）宽度。
var wd = Ext.fly（"elId"）.getWidth（）;
56.setHeight
设置元素的高度。
Ext.fly（"elId"）.setHeight（）;
57.setWidth
设置元素的宽度。
Ext.fly（"elId"）.setWidth（）;
58.getBorderWidth
返回指定边（side（s））的padding宽度。
var bdr_wd = Ext.fly（"elId"）.getBorderWidth（"lr"）;
59.getPadding
可以是t, l, r, b或是任何组合。例如，传入lr的参数会得到（l）eft padding +（r）ight padding。
var padding = Ext.fly（"elId"）.getPadding（"lr"）;
60.clip
保存当前的溢出（overflow），然后进行裁剪元素的溢出部分 - 使用unclip（）来移除。
Ext.fly（"elId"）.clip（）;
61.unclip
在调用clip（）之前，返回原始的裁剪部分（溢出的）。
Ext.fly（"elId"）.unclip（）;
62.isBorderBox
测试不同的CSS规则/浏览器以确定该元素是否使用Border Box。
if （Ext.isBorderBox） {
//
}

十一、定位

63.getX
返回元素相对于页面坐标的X位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。
var elX = Ext.fly（"elId"）.getX（）
64.getY
返回元素相对于页面坐标的Y位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。
var elY = Ext.fly（"elId"）.getY（）
65.getXY
返回元素当前页面坐标的位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。
var elXY = Ext.fly（"elId"）.getXY（） // elXY是数组
66.setX
返回元素相对于页面坐标的X位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。
Ext.fly（"elId"）.setX（10）
67.setY
返回元素相对于页面坐标的Y位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。
Ext.fly（"elId"）.setY（10）
68.setXY
返回元素当前页面坐标的位置。元素必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。
Ext.fly（"elId"）.setXY（[20,10]）
69.getOffsetsTo
返回当前元素与送入元素的距离。这两个元素都必须是属于DOM树中的一部分才拥有正确的页面坐标（display:none或未加入的elements返回false）。
var elOffsets = Ext.fly（"elId"）.getOffsetsTo（anotherEl）;
70.getLeft
获取左边的X坐标。
var elLeft = Ext.fly（"elId"）.getLeft（）;
71.getRight
获取元素右边的X坐标（元素X位置 + 元素宽度）。
var elRight = Ext.fly（"elId"）.getRight（）;
72.getTop
获取顶部Y坐标。
var elTop = Ext.fly（"elId"）.getTop（）;
73.getBottom
获取元素的底部Y坐标（元素Y位置 + 元素宽度）。
var elBottom = Ext.fly（"elId"）.getBottom（）;
74.setLeft
直接使用CSS样式（代替setX（）），设定元素的left位置。
Ext.fly（"elId"）.setLeft（25）
75.setRight
设置元素CSS Right的样式。
Ext.fly（"elId"）.setRight（15）
76.setTop
直接使用CSS样式（代替setY（）），设定元素的top位置。
Ext.fly（"elId"）.setTop（12）
77.setBottom
设置元素CSS Bottom的样式。
Ext.fly（"elId"）.setBottom（15）
78.setLocation
无论这个元素如何定位，设置其在页面的坐标位置。元素必须是DOM树中的一部分才拥有页面坐标（display:none或未加入的elements会当作无效而返回false）。
Ext.fly（"elId"）.setLocation（15,32）
79.moveTo
无论这个元素如何定位，设置其在页面的坐标位置。元素必须是DOM树中的一部分才拥有页面坐标（display:none或未加入的elements会当作无效而返回false）。
Ext.fly（"elId"）.moveTo（12,17）
80.position
初始化元素的位置。如果未传入期待的位置，而又还没定位的话，将会设置当前元素为相对（relative）定位。
Ext.fly（"elId"）.position（"relative"）
81.clearPositioning
当文档加载后清除位置并复位到默认。
Ext.fly（"elId"）.clearPositioning（）
Ext.fly（"elId"）.clearPositioning（"top"）
82.getPositioning
返回一个包含CSS定位信息的对象。有用的技巧：连同setPostioning一起，可在更新执行之前，先做一个快照（snapshot），之后便可恢复该元素。
var pos = Ext.fly（"elId"）.getPositioning（）
83.setPositioning
由getPositioning（）返回的对象去进行定位。
Ext.fly（"elId"）.setPositioning（{
left: "static",
right: "auto"
}）
84.translatePoints
送入一个页面坐标的参数，将其翻译到元素的CSS left/top值。
// {left:translX, top: translY}
var points = Ext.fly（"elId"）.translatePoints（15,18）;