[转]ExtJs基础--Html DOM、Ext Element及Component三者之间的区别

时间：2022-01-24 20:25:08

要学习及应用好Ext框架，必须需要理解Html DOM、Ext Element及Component三者之间的区别。

每一个HTML页面都有一个层次分明的DOM树模型，浏览器中的所有内容都有相应的DOM对象，动态改变页面的内容，正是通过使用脚本语言来操作DOM对象实现。(通常使用getElementById/Ext.getDOM获得DOM对象)

仅仅有DOM是不够的，比如要把页面中的某一个节点移到其它位置，要给某一个节点添加阴影效果，要隐藏或显示某一个节点等，我们都需要通过几句 javascript才能完成。因此，Ext在DOM的基础上，创建了Ext Element，可以使用Element来包装任何DOM，Element对象中添加了一系列快捷、简便的实用方法。(通常使用Ext.get获得Element对象)

对于终端用户来说，仅仅有Element是不够的，比如用户要显示一个表格、要显示一棵树、要显示一个弹出窗口等。因此，除了Element以外，Ext 还建立了一系列的客户端界面组件Component，我们在编程时，只要使用这些组件Componet即可实现相关数据展示及交互等，而 Component是较高层次的抽象，每一个组件在渲染render的时候，都会依次通过Element、DOM来生成最终的页面效果。(通常使用Ext.getCmp获得Component对象)

Ext中
getDom、get、getCmp的区别

getDom方法能够得到文档中的DOM节点，该方法中包含一个参数，该参数可以是DOM节点的id、DOM节点对象或DOM节点对应的Ext元素(Element)等。
(与getElementById是一个效果)

  1. Ext.onReady(function()
  2. {var e=new Ext.Element("hello");
  3. Ext.getDom("hello");
  4. Ext.getDom(e);
  5. Ext.getDom(e.dom);
  6. });

//Html页面中包含一个id为hello的div，代码如下：<div id="hello">aaa</div>?

在上面的代码中，Ext.getDom("hello")、Ext.getDom(e)、Ext.getDom(e.dom)等三个语句返回都是同一个DOM节点对象。?

?

get方法中只有一个参数，这个参数是混合参数，可以是DOM节点的id、也可以是一个Element、或者是一个DOM节点对象等。
get方法其实是Ext.Element.get的简写形式。?

?

  1. Ext.onReady(function(){
  2. var e=new Ext.Element("hello");?
  3. Ext.get("hello"));
  4. Ext.get(document.getElementById("hello"));
  5. Ext.get(e);
  6. });

//Html页面中包含一个id为hello的div，代码如下：<div id="hello">aaa</div>?

Ext.get("hello")、Ext.get(document.getElementById("hello"))、Ext.get(e)等三个方法都可以得到一个与DOM节点hello对应的Ext元素。

getCmp方法用来获得一个Ext组件，也就是一个已经在页面中初始化了的Component或其子类的对象，getCmp方法中只有一个参数，也就是组件的id。
getCmp方法其实是Ext.ComponentMgr.get方法的简写形式。

  1. Ext.onReady(function(){
  2. var myPanel=new Ext.Panel({id:“myFirstPanel”,?title:“旧的标题",renderTo:"hello",width:300, height:200?});
  3. Ext.getCmp(" myFirstPanel ").setTitle("新的标题");
  4. });

//Html页面中包含一个id为hello的div，代码如下：<div id="hello">aaa</div>

我们使用Ext.getCmp(“myFirstPanel").来得到id为myFirstPanel的组件，并调用其setTitle方法来设置该面板的标题。

DOM的增删改查

Ext.Element占Ext Core库的篇幅很大，其中方法就占据了大部分。因此我们将这些方法可分为下面几类：

DOM查询或遍历（如query、select、findParent）

CSS（如setStyle、addClass）

DOM操控（如createChild、remove）

方位、尺寸（如getHeight、getWidth）

DOM查询----Ext.query与Ext.select

Ext.query和Ext.select的作用同是根据CSS选择符,基本的XPath,HTML属性等查找出一个或多个元素。区别在于返回类型上。分别是：

query方法返回的是JavaScript标准的数组类型；
select方法返回的是CompositeElement类型，试比较：

  1. alter(Ext.isArray(Ext.query(‘a.BigClass’))); //true
  2. alter(Ext.query(‘a.BigClass’).length);//里面包含的元素个数
  3. Ext.select('a.BigClass').each(function(i){
  4. i.dom.href = 'javescript:void(0);'// 找到所有带有BigClass样式的A元素修改其链接
  5. });

CompositeElement类型属于Ext自定义的类型，简单地说是以一个Ext.Element实例代表集合中多个元素，可实现
Element对象上所有的接口，也就是说CompositeElement在Ext中用于表示元素的集合中不论有多少个元素，均被视为一个单独元素处
理。

它的用法和单个的Element对象一样。select方法返回的结果可直接如同Element般地操作，一般比query方法常用。

DOM查询----
DomQuery详解

DomQuery是Ext Core提供的HTML或XML文档选择器，它支持大部分的CSS 3选择器规则，同时提供了一些自定义方式.

DomQuery主要有4种选择方式：元素标记、元素属性、伪对象、
CSS值

1.通过元素标记选择，主要有以下6种方法：
（1）*：选择任何元素。其使用方法请看下面代码。
 Ext.select('*');
（2）E：元素的标记为E。其使用方法请看下面代码。
 Ext.select('div');
（3）E F：选择包含在标记E中的标记F。其使用方法请看下面代码。
 Ext.select('div
a');//将选择div下的a元素
（4）E>F：选择包含在标记E中的直接子标记F。其使用方法请看下面代码。
 Ext.select('div>a');//将选择div下的直接子元素a
（5）E+F：选择所有紧接在元素E后的元素F。其使用方法请看下面代码。
 Ext.select('div+a');//将选择紧接在div下的元素a
（6）E~F：选择所有紧接在元素E后的同层元素F。其使用方法请看下面代码。
Ext.select('div～a');//将选择紧接在div下的同层元素a

2.通过元素属性选择，主要有以下7种语法。
（1）E[foo]：选择带有属性foo的元素。其使用语法请看下面代码。
 Ext.select('div[id]');//选择有id属性的div元素
（2）E[foo=bar]：选择foo的属性值为bar的元素。其使用语法请看下面代码。
 Ext.select('input[checked=true]');//选择checked属性值为true的元素
（3）E[foo^=bar]：选择foo的属性值以bar开头的元素。其使用语法请看下面代码。
 Ext.select('input[name^=form1]');
//选择name属性值以form1开头的元素
（4）E[foo$=bar]：选择foo的属性值以bar结尾的元素。其使用语法请看下面代码。
 Ext.select('input[name$=form1]');
//选择name属性值以form1结尾的元素
（5）E[foo*=bar]：选择foo的属性值包含字符串bar的元素。其使用语法请看下面代码。
 Ext.select('input[name*=form1]');
//选择name属性值包含字符串form1的元素
（6）E[foo%=2]：选择foo的属性值能整除2的元素。其使用语法请看下面代码。
 Ext.select('input[value%=2]');
//选择value属性值能整除2的元素
（7）E[foo!=bar]：选择foo的属性值不等于bar的元素。其使用语法请看下面代码。
 Ext.select('input[name!=form1]'); //选择name属性值不等于form1的元素

3.通过伪对象选择，主要有以下18种语法。
（1）Ext.select('ul
li:first-child'); //选择所有ul下的第一个li子节点
（2）Ext.select('ul li:last-child');
//选择所有ul下的最后一个li子节点
（3）Ext.select('ul li:nth-child(2)');
//选择所有ul下的第2个li子节点
（4）Ext.select('ul li:nth-child(odd)');
//选择所有ul下的奇数行li子节点
（5）Ext.select('ul li:nth-child(evan)');
//选择所有ul下的偶数行li子节点
（6）Ext.select('ul li:only-child');
//选择所有ul下只有一个子节点的li节点
（7）Ext.select('input:checked');//选择所有checked属性值为true的元素
（8）Ext.select('input:first');
//选择第一个input元素
（9）Ext.select('input:last');
//选择最后一个input元素
（10）E:nth(n)：选择匹配的第n（n≥1）个元素E。其使用语法请看下面代码。
 Ext.select('input:nth(2)');
//选择第2个input元素
（11）E:odd：是语法“:nth-child(odd)”的简写。
（12）E:evan：是语法“:nth-child(evan)”的简写。
（13）Ext.select('div:contains(list)');
//选择innerHTML属性包含“list”的div
（14）Ext.select('div:nodeValue(test)');
//选择包含文本节点且值为“test”的div
（15）Ext.select('input:not(:checked)');
//选择不包含checked属性的input
（16）Ext.select('div:has(p)');
//选择包含p的div
（17）Ext.select('div:next(p)');
//选择与包含p的div同层的下一个div
（18）Ext.select('div:prev(p)');
//选择与包含p的div同层的下一个div

4.通过CSS值进行选择。主要有以下6种语法。
（1）E:{display=none}：选择display值为none的元素E。其使用语法请看下面代码。
Ext.select('div:{display=none}');
//选择display值为none的元素E
（2）Ext.select('div:{display^=none}');
//选择display值以none开始的元素E
（3）Ext.select('div:{display$=none}');
//选择display值以none结尾的元素E
（4）Ext.select('div:{display*=none}');
//选择display值包含字符串none的元素E
（5）Ext.select('div:{display%=none}');
//选择display值整除2的元素E
（6）Ext.select('div:{display!=none}');
//选择display值不等于none的元素E

Domquery的语法可以单独使用，也可以组合在一起使用，例如以下代码：

Ext.select('div,span');
//选择所有div元素与span元素
//选择class为red，且是第1个子节点，display属性为none的div
Ext.select('div.red:first-child[display=none]');

如果没有指定选择器开始搜索的根节点，默认是从body节点开始，这就等于每次都要做全文搜索，其性能可想而知，是相当低效的，因此，建议大家在每次搜索时都指定搜索的根节点，减少搜索范围。设置搜索根节点的语法请看下面代码。

Ext.select('div',true, 'elId'); // elId为根节点id

//下面这句与上面的效果是一样的

Ext.get('elid').select('div');

操纵CSS

Ext为我们提供了很多操纵CSS的方法.

addClass轻松地为一个元素添加样式：

Ext.get('elId').addClass('myCls'); // 加入元素的'myCls'的样式

radioClass添加一个或多个className到这个元素，并移除其所有侧边（siblings）节点上的同名样式。

Ext.get('elId').radioClass('myCls');//为元素添加‘myCls’在所有侧边元素上删除‘myCls’样式

removeClass移除元素身上一个或多个的CSS类。

Ext.get('elId').removeClass('myCls'); // 移除元素的样式

toggleClass轮换（Toggles，两种状态中转换到一个状态）--添加或移除指定的CSS类（如果已经存在的话便删除，否则就是新增加）。

Ext.get(‘elId’).toggleClass(‘myCls’); // 加入(移除,再加入)样式
Ext.get('elId').toggleClass('myCls');

hasClass检查某个CSS类是否作用于这个元素身上。

If (Ext.get(‘elId’).hasClass(‘myCls’)) {alert(‘是有样式的’);}

replaceClass在这个元素身上替换CSS类。

Ext.get('elId').replaceClass('myClsA', 'myClsB');

getStyle返回该元素的统一化当前样式和计算样式。

var color = Ext.get('elId').getStyle('color');
var zIndx =
Ext.get('elId').getStyle('z-index');
var fntFmly =
Ext.get('elId').getStyle('font-family'); // ... 等等

setStyle设置元素的样式，也可以用一个对象参数包含多个样式。
Ext.get('elId').setStyle('color',
'#FFFFFF');
Ext.get('elId').setStyle('z-index', 10);

Ext.get('elId').setStyle({ display : 'block', overflow : 'hidden', cursor :
'pointer' });
Ext.get('elId').setStyle('color', '#FFFFFF', true); //
带有动画的变换过程
Ext.get(‘elId’).setStyle(‘color’, ‘#FFFFFF’, {duration: .75}); //
带有0.75秒动画变换过程

getColor为指定的CSS属性返回CSS颜色。RGB、三位数(像#fff)和有效值都被转换到标准六位十六进制的颜色。
Ext.get('elId').getColor('background-color');

Ext.get('elId').getColor('color');

Ext.get('elId').getColor('border-color'); // ... 等等

setOpacity设置元素的透明度。
Ext.get('elId').setOpacity(.5);

Ext.get('elId').setOpacity(.45, true); //
动画
Ext.get('elId').setOpacity(.45, {duration: .5}); //
附有半秒的动画过程
clearOpacity清除这个元素的透明度设置。
Ext.get('elId').clearOpacity();

操纵DOM

appendChild 把送入的元素归为这个元素的子元素。
var el =
Ext.get('elId1');
Ext.get('elId').appendChild('elId2'); //
'elId2'添加到'elId'里面
Ext.get(‘elId’).appendChild(el); //
参数还可以是:[‘elId2’,‘elId3’],???? el.dom?? ,???? Ext.select(‘div’)

appendTo把这个元素添加到送入的元素里面。
Ext.get('elId').appendTo('elId2');//
'elId'添加到'elId2'里面

Replace 用于当前这个元素替换传入的元素。
Ext.get('elId').replace('elId2'); //
'elId'去替换'elId2‘

replaceWith 用传入的元素替换这个元素
Ext.get('elId').replaceWith('elId2'); //
'elId2'替换掉'elId'.

insertBefore
传入一个元素的参数，将其放置在当前元素之前的位置
Ext.get('elId').insertBefore('elId2');

insertFirst
可以是插入一个元素，也可以是创建一个元素（要创建的话请使用“DomHelper配置项对象”作为参数传入），这个元素将作为当前元素的第一个子元素出现。
 Ext.get(‘elId').insertFirst(el);
 // 用DomHelper配置项创建新节点
 Ext.get('elId').insertFirst({
 tag: 'p',
 cls:
'myCls',
 html: 'Hi I am the new first child'
 });

remove从DOM里面移除当前元素，并从缓存中删除。
Ext.get('elId').remove(); //
elId在缓存和dom里面都没有

操纵DOM- - -
-DOMHepler配置项

在上面的例子中，大家可能就注意到这样的语法：
.insertFirst({
tag: 'p',
html: 'Hi I am the
new first
child'
});
insertFirst方法的那个参数作用是什么呢？参数就是要创建的装饰元素(HTML元素)在DomHelper
中是怎么表示的，也就是DomHelper的配置选项，其配置项支持很多的HTML属性，html片断也行，至于html属性就可以是Dom节点的很多属性了（css
class、url、src、id等）。

DomHelper配置可视作任何HTML元素的等价物.

DomHelper是专用于动态生成装饰元素的实用工具，已解决大多数浏览器之间差别的问题，避免了原始操作DOM脚本的麻烦。对于HTML片断与innerHTML的操作，
DomHelper经充分考虑并在性能上有足够的优化。

Ext.DomHelper是一个单例，因此无须实例化即可调用其静态方法:
markup, insertHtml , insertBefore ,
insertAfter , insertFirst , append ,overwrite

例1
:Ext.DomHelper.append('my-div', {tag:?'ul', cls:?'my-class'});
例2
:Ext.DomHelper.insertFirst('my-div', '<p>Hi</p>');

尺寸&大小

某个元素在页面上，我们就想获得到其尺寸大小或改变它的尺寸大小。毫无意外下，Ext
Core也把这些任务抽象为清晰的API供大家使用。这些都是setter的方法，可传入动画的配置参数，或即就是以个布尔型的true，表示
这是默认的动画。
Ext.get('elId').setHeight(200,
true); // 设置高度为200px以默认配置进行动画

// 设置高度为150px以自定义的配置进行动画
Ext.get('elId').setHeight(150, {
duration :
.5, // 动画将会持续半秒
callback: function(){ this.update("结束");} //
动画过后改变其内容为“结束”
});

getHeight//返回元素的偏移（offset）高度。
getWidth//返回元素的偏移（offset）宽度。
setHeight//设置元素的高度。
setWidth//设置元素的宽度。
getBorderWidth//返回指定边（side(s)）的padding宽度。
getPadding//可以是t,
l, r, b或是任何组合。传入lr的参数会得到leftpadding+right
padding。
clip//保存当前的溢出（overflow），然后进行裁剪元素的溢出部分
使用unclip()来移除。
unclip//在调用clip()之前，返回原始的裁剪部分（溢出的）

定位

通过Ext
Core定义的API能快速地采集元素位置的各方面数据，归纳为get的或set的方法，全部浏览器都可通用。类似于上一节的尺寸大小的API，多数的setter方法支持动画效果。可在第二参数中传入动画的配置参数（object-literal
configuration object），或即就是以个布尔型的true，
表示这是默认的动画。

set/getX
set/getY
set/getXY
set/getOffsetsTo//返回当前元素与送入元素的距离
var
elOffsets =
Ext.get('elId').getOffsetsTo(anotherEl);
set/getLeft
set/getRight
set/getTop
set/getBottom
setLocation//无论这个元素如何定位，设置其在页面的坐标位置。

clearPositioning//当文档加载后清除位置并复位到默认

set/getPositioning//返回一个包含CSS定位信息的对象。有用的技巧：连同setPostioning
一起，可在更新执行之前，先做一个快照（snapshot），之后便可恢复该元素

相关文章