要学习及应用好Ext框架,必须需要理解Html DOMExt ElementComponent三者之间的区别。

 

 

每一个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是一个效果)

Js代码  收藏代码
  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,代码如下:

aaa
?

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

?

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

?

Js代码  收藏代码
  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,代码如下:

aaa
?

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

 

 

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

 

Js代码  收藏代码
  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,代码如下:

aaa

我们使用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类型,试比较:

 

 

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

 

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', '

Hi

');

 


尺寸&大小

 

某个元素在页面上,我们就想获得到其尺寸大小或改变它的尺寸大小。毫无意外下,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),之后便可恢复该元素