[b]一、获取元素（Getting Elements）[/b]
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节点
[b]二、CSS元素[/b]
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();//清除这个元素的透明度设置
[b]三、Dom游历[/b]
16.Ext.fly('elId').select('li:nth-child(2n)').addClass('red');
17.is 测试当前元素是否与传入的选择符相符一致。
[url=anotherpage.html]); // 返回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)
[b]七、Ajax
[/b]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"
}
});
[b]八、事件控制Event Handling
[/b]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);
[b]九、高级事件功能[/b]
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')
});
[b]十、尺寸&大小[/b]
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) {
//
}
[b]十一、定位[/b]
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);
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码（独立后台）...
