• extjs 关于dom操作的几个库


    经过几天的学习研究,发现ext与jquery的设计思路完全是来自两个方向。

    jquery是内聚,把所有东西都放在$的下面,而ext是采用分模块的设计思路,每个功能封装一个库。这样就形成了各自的实用风格,jquery由于所有的功能都挂在$下面,所以这种扁平而精炼的功能布局让人能很快上手;但是ext就不一样的,由于各个模块间还有相互调用的关系,所以内部关系是错中复杂。按原理来说ext的各模块是可以单独使用的,但是这个真的实施起来是相当费劲的。所以我觉得jquery更像一个好秘书,你说一句话她就能帮你完成dom的那一摊子事,ext就更像一个老婆,你只能爱她一个,什么事都要围着她转,其他的框架只能给你做小秘,其核心地位绝对不能撼动,否则她会让你死的很难看。

    以上是总体的思路,有了这个思路理解和使用具体的功能就会顺心多了。

    Ext.Element 、Ext.DomHelper、Ext.DomQuery三个支柱性库。

    Ext.Element:

    Ext.Element.get()快捷方式Ext.get(),只能以dom的id作为参数去获取Ext.Element对象(Ext.get返回的结果是Ext.Element对象的实例, .dom才是原生的dom)。在Ext中所有组件都是有Id的,这个Id可以是手动指定,也可以是Ext的Id生成机制自动生成。

    Ext.DomHelper:

    主要是操作dom。

    Ext.DomHelper.append()是一个很常用的方法,值得一提的是由于Ext采用了对象缓存机制,在MVC模式下在不同的tab切换的时候如果重新渲染dom,使用Ext.DomHelper.append()添加的元素不会丢失,但是使用原生或者其他框架(比如jq)就会丢失。这就是我说她像一个的老婆原因之一。看几个用法:

    一、直接字符串 

    Ext.DomHelper.append(元素id,'<a href="#">你好</a>');

    二、对象

    Ext.DomHelper.append(元素id,{tag:ul,children:[{tag:li,html:'一个ul列表的第一项'},{...}]});

    Ext.DomHelper.insertHtml()另一个很常用的方法

    Ext.DomHelper.insertHtml(位置参数,dom,'<a href="#">你好</a>');

    位置参数:beforeBegin、afterBegin、beforeEnd、afterEnd

    Ext.DomHelper.overwrite(dom的id,'<a href="#">你好</a>');相当于原生的 .innerHtml="";所以是重写容器中的内容。

    var tpl = Ext.DomHelper.createTemplate("<li>{content}</li>");

    tpl.overwrite(domID,{content:'内容'});

    引用文件有问题,会报错

    还有另一种用法:

    var tpl = new Ext.DomHelper.createTemplate({tag:"li",html:"{content}"});,同样的报错...哪位大神路过望指点

    如果是列表,那就要借助for循环append了。

    Ext.DomQuery 查找dom元素的利器

    Ext.query('div')、Ext.query('[id="domId"]')、Ext.query('div:first-child').支持绝大部分的CSS3选择器

    Ext.query() 是Ext.DomQuery.select()的快捷方式, 返回标准dom。

  • 相关阅读:
    Java系列: JAVA字符串格式化-String.format()的使用(zz)
    Eclipse系列: 在Eclipse中用TODO标签管理任务(Task)(ZZ)
    JNDI全面总结(zz)
    Java Platform Standard Edition 8 Documentation
    JAVA NIO是什么(zz)
    Java NIO框架Mina、Netty、Grizzly介绍与对比(zz)
    Bootstrap系列 -- 25. 下拉菜单分割线
    Bootstrap系列 -- 24. 下拉菜单基本用法
    Bootstrap系列 -- 23. 图片
    Bootstrap系列 -- 22. 按钮详解
  • 原文地址:https://www.cnblogs.com/longze/p/3297627.html
Copyright © 2020-2023  润新知