|
|
鄭重聲明:此問題根本不是問題,現在看來就是本人知識匱乏,庸人自擾,望廣大朋友勿噴!!
細心發現問題,耐心解決問題,信心面對問題.
作者:白某人
長話短說:”服務員,上代碼....”
測試代碼:
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執行]
以下是在IE下的測試.我所期望的結果是(旁白:我已經開始犯錯了):
<div id="div88">this is div88</div>
<div id="div2">this is div2</div>
<div id="div3">this is div3</div>
實際結果:
<div id="div88">this is div88</div>
問題:
Div2,div3 丟了?
發現問題怎么辦?看代碼.
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方法,為什么會有問題呢?
輸出中間代碼:
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;
//.........
結果如下:
this is div1
<DIV id=div2>this is div2</DIV>
<DIV id=div3>this is div3</DIV>
?????? 為什么會這樣? “this is div1”兩邊的<div>標簽呢?
在測試:
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;
//.........
結果如下:
<DIV id=div1>
this is div1
<DIV id=div2>this is div2</DIV>
<DIV id=div3>this is div3</DIV>
</DIV>
(旁白:本來到這就已經能發現問題所在了,但執迷不悟,繼續犯錯)
原來它把div2,div3插到div1的value/text 后邊了.所以運行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技術：javascript 一段代碼引發的思考第1/2頁，轉載需保留來源！
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。
