zoukankan      html  css  js  c++  java

  • 9. Ext基础1 -- Ext中 getDom、get、getCmp的区别

    转自：https://blog.csdn.net/huobing123456789/article/details/7982061

    要学习及应用好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是一个效果)

    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. });  
    [js] view plain copy print?
    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的简写形式。?

    ?

    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. });  
    [js] view plain copy print?
    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方法的简写形式。

    Js代码 复制代码 收藏代码
    1. Ext.onReady(function(){   
    2. var myPanel=new Ext.Panel({id:“myFirstPanel”,?title:“旧的标题",renderTo:"hello",300, height:200?});   
    3. Ext.getCmp(" myFirstPanel ").setTitle("新的标题");   
    4. });  
    [js] view plain copy print?
    1. Ext.onReady(function(){  
    2. var myPanel=new Ext.Panel({id:“myFirstPanel”,?title:“旧的标题",renderTo:"hello",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类型，试比较：

    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. });  
    [js] view plain copy print?
    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', '<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），之后便可恢复该元素

    原文链接：http://xzuse.iteye.com/blog/974878
  • 相关阅读:
    面向切面编程AOP
    多线程：Monitor、synchronized、volatile
    约束布局ConstraintLayout
    【转】StackTraceElement获取方法调用栈的信息
    Java中的Type
    Android App 架构演变
    Java泛型
    web测试方法总结
    机器学习 损失函数
    深度学习 激活函数
  • 原文地址：https://www.cnblogs.com/sharpest/p/7536365.html
Copyright © 2011-2022 走看看