日期:2014-05-16  浏览次数:20354 次

extJs 2.0学习笔记(DomHelper.js篇)

这个文件定义的是Ext.DomHelper类。作用是提供一些Dom的操作。这个类不是静态类。
  这个类第一个函数createHtml是一个私有函数,用于从指定转入创建对应的html文本。这个类有多种情况,根据源代码分析:

  var createHtml = function(o){}

  o的取值可能有:string(现成的html字符串)、Array(JSON对象数组)、object(JSON对象)

  可见,createHtml的主要作用是把一个JSON序列化为html字符串。那么,createHtml能识别的JSON对象有什么格式要求呢?当然有,描述如下:

  {tag:string,          //元素的标记名,如果没有,默认为div

  children|cn:string|Array|json,  //子结点对应的json数组或字节点的html或单个json

  html:string,          //对应的html,如果有cn或children属性就忽略

  style:function|string|json,    //元素的样式,可以是函数,字符串,json对象

  cls:string,           //元素的class属性的值

  htmlFor:string         //元素的For属性,

  x:y              //x表示其他名字,y表示非函数、非空内容

  }

  我发现,style尽管允许是放一个function,但是,如果真是function的话,那么对应的style并不会生成,因为如下代码:

  if(attr == "tag" || attr == "children" || attr == "cn" || attr == "html" || typeof o[attr] == "function") continue;

  如果值是函数,就continue了。这应当是extJs程序员不小心的bug。

?

  下面有一个私有函数:createDom,定义为var createDom = function(o, parentNode){……},用于根据一个o创建dom结构树,并把它放到parentNode这个节点下。o的情况跟上面的createHtml一样。这儿我学到的是:documentFragment,这个函数用于创建一个文档碎片,为什么用它呢?点此处见详情!document结构下,每appendChild一次就引发一次树的刷新,这将影响性能,而使用Fragment,相当于先将所节点创建好好一缓存,然后一次性appendChild到document(注意,这儿的document泛指文档树)下。

?

  var insertIntoTable = function(tag, where, el, html){……}

  它的作用是往表里面插入单元格或行、或tbody或在table之前或之后插入指定html内容的文本。即:

  tag:null/td/tr/tbody

  where:beforebegin/afterend/afterbegin

  el:节点的引用

  html:要插入的内容

?

  后面就是insertHtml了,这个函数是关键,可惜里面好多函数不熟,整个DomHelper中的那些函数,好多都是建立在它的基础之上的。像什么:insertBefore、insertEnd、insertFirst、append。overwrite是重写已有节点的 innerHTML用的。至此功能倒是齐全了。

  其实,总结Dom操作,无非就是插、删、修改。这儿封装的都是插入,因为修改简单,改它的innerHTMl就是了,况且这儿还有一个overwrite。删也简单,有Ext.destroy。Ext.Element.remove。

  

  今天精神有点不好,我看了一大把的js文件。每个文件的代码量都不少。这要看到什么时候啊。不能这么干了。不过,还是打算花大力气研究一下Ext.Element。



本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/huoyanxueren/archive/2008/07/16/2662777.aspx