Ext-js使用指南（总结）1.0-4.2的版本

一、获取元素（Getting Elements）

1.Ext.get

var el = Ext.get(‘myElementId’);
//获取元素，等同于document.getElementById(‘myElementId’);//会缓存

2. Ext.fly

var el = Ext.fly(‘myElementId’)//不需要缓存。
注：享元模式（Flyweight DesignPattern）是一种节省内存的模式，该模式的大概原理是建立单个全体对象然后不断反复使用它。

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