设为首页 - 加入收藏 - 网站地图 欢迎加QQ群 :14364084
当前位置:谭博的博客 > 编程语言 > js > Ext > 正文

Ext基础一(转载)

时间:2013-02-21 10:36 来源: 标签: 作者:浮云飘飘 阅读:
要学习及应用好Ext框架,必须需要理解HtmlDOMExtElementComponent三者之间的区别。 每一个HTML页面都有一个层次分明的DOM树模型,浏览器中的所有内容都有相应的DOM对象,动态改变页面的内容,正是通过使用脚本语言来操作DOM对象实现。(通常使用getElementById/Ext.getDOM获得DOM对象) 仅仅有DOM是不够的,比如要把页面中的某一个节点移到其它位置,要给某一个节点添加阴影效果,要隐藏或显示某一个节点等,我们都需要通过几句 javascript才能完成。因此,Ext在DOM的基础上,创建了ExtElement,可以使用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代码
[js] Ext.onReady(function() {var e=new Ext.Element("hello"); Ext.getDom("hello"); Ext.getDom(e); Ext.getDom(e.dom); [/js]
//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的简写形式。
Js代码
[js] Ext.onReady(function(){ var e=new Ext.Element("hello"); Ext.get("hello")); Ext.get(document.getElementById("hello")); Ext.get(e); }); [/js]
//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方法的简写形式。
Js代码
[js] Ext.onReady(function(){ var myPanel=new Ext.Panel({id:"myFirstPanel",title:"旧的标题",renderTo:"hello",width:300, height:200}); Ext.getCmp("myFirstPanel").setTitle(“新的标题”); }); [/js]
//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类型,试比较:
Js代码
[js] alter(Ext.isArray(Ext.query('a.BigClass'))); //true alter(Ext.query('a.BigClass').length);//里面包含的元素个数 Ext.select('a.BigClass').each(function(i){ i.dom.href = 'javescript:void(0);'// 找到所有带有BigClass样式的A元素修改其链接 }); [/js]
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+rightpadding。 clip//保存当前的溢出(overflow),然后进行裁剪元素的溢出部分 使用unclip()来移除。 unclip//在调用clip()之前,返回原始的裁剪部分(溢出的)

定位

通过Ext Core定义的API能快速地采集元素位置的各方面数据,归纳为get的或set的方法,全部浏览器都可通用。类似于上一节的尺寸大小的API,多数的setter方法支持动画效果。可在第二参数中传入动画的配置参数(object-literalconfiguration 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),之后便可恢复该元素

 

关注微信公众号

微信扫一扫,打赏我

上一篇:没有了
下一篇:没有了
相关内容
热评文章
    内容不错,支持一下
    评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)