|
|
鄭重聲明:此問題根本不是問題,現(xiàn)在看來就是本人知識(shí)匱乏,庸人自擾,望廣大朋友勿噴!!
細(xì)心發(fā)現(xiàn)問題,耐心解決問題,信心面對(duì)問題.
作者:白某人
長(zhǎng)話短說:”服務(wù)員,上代碼....”
測(cè)試代碼:
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
以下是在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>
問題:
Div2,div3 丟了?
發(fā)現(xià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 + '"';
}
//////后面省略
}
原來還是用的insertAdjacentHTML方法,為什么會(huì)有問題呢?
輸出中間代碼:
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>
(旁白:本來到這就已經(jīng)能發(fā)現(xiàn)問題所在了,但執(zhí)迷不悟,繼續(xù)犯錯(cuò))
原來它把div2,div3插到div1的value/text 后邊了.所以運(yùn)行tpl.overwrite('div1',{id:'88'});后div2,div3沒了.
在此附上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;
}
問題知道了,可怎么辦呢,改Ext源碼?
JavaScript技術(shù)：javascript 一段代碼引發(fā)的思考第1/2頁，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
