何炼文新概念个人博客

研究javascript,css3,html5,nodejs,Ext js等技术研究。

您现在的位置是: 首页 > 技术分享 > 欣赏

Ext基础操作dom更改css(转载)

发布时间:2014-08-19分享人:人浏览有0人评论

    要学习及应用好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,代码如下:<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. });  

     

    //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方法的简写形式。

关键字词  EXTjs CSS HTML 浏览器 JavaScript


如果你认为这篇文章值得更多人阅读,欢迎使用下面的分享功能。