On the last day of 2008, I wish you all a happy New Year!!!
Solemnly declare: This question is not a problem at all, now seems to be my knowledge is scarce, ADO about, hope the vast majority of friends do not spray!!
Find problems carefully, solve problems patiently, and face problems with confidence.
Author: white person
Long story short: "Waiter, on Code ..."
Test code:
<script type= "Text/javascript" > Function init () {var TPL = new Ext.template (' <div id= ' Div{id} ">this is Div{i D}</div> '); Tpl.append (' Div1 ', {id: ' 2 '}); Tpl.insertafter (' Div2 ', {ID: ' 3 '}); Tpl.overwrite (' Div1 ', {ID: ' 88 '}); } ext.onready (init); </script> </pead> <body> <div id= "Div1" >this is div1</div> </body>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
The following is a test under IE. The result I expected was (narrator: I was starting to make a mistake):
<div id= "div88" >this is div88</div>
<div id= "Div2" >this is div2</div>
<div id= "Div3" >this is div3</div>
Actual results:
<div id= "div88" >this is div88</div>
Problem:
Div2,div3 lost it?
What happens when you find the problem? Look at the code.
Template.js line:197 (Extjs ver 2.2)
Append:function (El, values, returnelement) {
Return This.doinsert (' BeforeEnd ', El, Values, returnelement);
}
Looking at the 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;
}
Looking at: 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 + ' ';
}
Omitted after
}
The original or the use of insertAdjacentHTML method, why there is a problem?
Output Intermediate Code:
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;
//.........
The results are as follows:
This is DIV1
<div Id=div2>this is div2</div>
<div Id=div3>this is div3</div>
?????? Why is that? What is the <div> label on both sides of the "This is Div1"?
In the test:
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;
//.........
The results are as follows:
<div id=div1>
This is DIV1
<div Id=div2>this is div2</div>
<div Id=div3>this is div3</div>
</DIV>
(Narrator: Ben came here to find out where the problem lies, but bigotry, continue to make mistakes)
It turned Div2,div3 into Div1 's value/text behind. So run Tpl.overwrite (' Div1 ', {ID: ' 88 '});
Attached here Tpl.overwrite source code (innerHTML Direct Assignment):
Overwrite:function (El, values, returnelement) {
El = Ext.getdom (EL);
el.innerhtml = This.applytemplate (values);
Return returnelement? Ext.get (El.firstchild, true): El.firstchild;
}
The question knows, can how to do, change ext source code?
Current 1/2 page
12 Next read the full text
