在2008年的最后一天,在此祝愿大家元旦快樂(lè)!!!
鄭重聲明:此問(wèn)題根本不是問(wèn)題,現(xiàn)在看來(lái)就是本人知識(shí)匱乏,庸人自擾,望廣大朋友勿噴!!
細(xì)心發(fā)現(xiàn)問(wèn)題,耐心解決問(wèn)題,信心面對(duì)問(wèn)題.
作者:白某人
長(zhǎng)話短說(shuō):”服務(wù)員,上代碼....”
測(cè)試代碼:

以下是在IE下的測(cè)試.我所期望的結(jié)果是(旁白:我已經(jīng)開始犯錯(cuò)了):
<div id="div88">this is div88</div>
<div id="div2">this is div2</div>
<div id="div3">this is div3</div>
實(shí)際結(jié)果:
<div id="div88">this is div88</div>
問(wèn)題:
Div2,div3 丟了?
發(fā)現(xiàn)問(wèn)題怎么辦?看代碼.
Template.js line:197 (Extjs ver 2.2)
append : function(el, values, returnElement){
return this.doInsert('beforeEnd', el, values, returnElement);
}
在看 line201:
doInsert : function(where, el, values, returnEl){
el = Ext.getDom(el);
var newNode = Ext.DomHelper.insertHtml(where, el, this.applyTemplate(values));
return returnEl ? Ext.get(newNode, true) : newNode;
}
在在看:DomHelper.js line:267
insertHtml : function(where, el, html){
where = where.toLowerCase();
if(el.insertAdjacentHTML){
if(tableRe.test(el.tagName)){
var rs;
if(rs = insertIntoTable(el.tagName.toLowerCase(), where, el, html)){
return rs;
}
}
switch(where){
case "beforebegin":
el.insertAdjacentHTML('BeforeBegin', html);
return el.previousSibling;
case "afterbegin":
el.insertAdjacentHTML('AfterBegin', html);
return el.firstChild;
case "beforeend":
el.insertAdjacentHTML('BeforeEnd', html);
return el.lastChild;
case "afterend":
el.insertAdjacentHTML('AfterEnd', html);
return el.nextSibling;
}
throw 'Illegal insertion point -> "' + where + '"';
}
//////后面省略
}
原來(lái)還是用的insertAdjacentHTML方法,為什么會(huì)有問(wèn)題呢?
輸出中間代碼:
var tpl = new Ext.Template('<div id="div{id}">this is div{id}</div>');
tpl.append('div1',{id:'2'});
tpl.insertAfter('div2',{id:'3'});
$("result-area").innerText = Ext.getDom("div1").innerHTML;
//.........
結(jié)果如下:
this is div1
<DIV id=div2>this is div2</DIV>
<DIV id=div3>this is div3</DIV>
?????? 為什么會(huì)這樣? “this is div1”兩邊的<div>標(biāo)簽?zāi)?
在測(cè)試:
var tpl = new Ext.Template('<div id="div{id}">this is div{id}</div>');
tpl.append('div1',{id:'2'});
tpl.insertAfter('div2',{id:'3'});
$("result-area").innerText = Ext.getDom("div1").outerHTML;
//.........
結(jié)果如下:
<DIV id=div1>
this is div1
<DIV id=div2>this is div2</DIV>
<DIV id=div3>this is div3</DIV>
</DIV>
(旁白:本來(lái)到這就已經(jīng)能發(fā)現(xiàn)問(wèn)題所在了,但執(zhí)迷不悟,繼續(xù)犯錯(cuò))
原來(lái)它把div2,div3插到div1的value/text 后邊了.所以運(yùn)行tpl.overwrite('div1',{id:'88'});后div2,div3沒(méi)了.
在此附上tpl.overwrite源碼(innerHTML直接賦值):
overwrite : function(el, values, returnElement){
el = Ext.getDom(el);
el.innerHTML = this.applyTemplate(values);
return returnElement ? Ext.get(el.firstChild, true) : el.firstChild;
}
問(wèn)題知道了,可怎么辦呢,改Ext源碼?

最新評(píng)論