在2008年的最后一天,在此祝愿大家元旦快樂!!!
鄭重聲明:此問題根本不是問題,現在看來就是本人知識匱乏,庸人自擾,望廣大朋友勿噴!!
細心發現問題,耐心解決問題,信心面對問題.
作者:白某人
長話短說:”服務員,上代碼....”
測試代碼:
[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;
//.........
