Ext's template supports template replacement by passing in JSON data.
An example of this is the API:
Copy Code code as follows:
var t = new Ext.template (
' <div name= ' {id} ' > ',
' <span class= ' {cls} ' >{name:trim} {value:ellipsis (#)}</span> ',
' </div> '
);
T.append (' Some-element ', {id: ' myID ', cls: ' MyClass ', Name: ' foo ', Value: ' Bar '});
Make a little change to do a test:
Copy Code code as follows:
var t = new Ext.template (
' <div name= ' {id} ' > ',
' <span class= ' {cls} ' >{name} {value}</span> ',
' </div> '
);
var dt=t.apply ({id: ' myID ', cls: ' MyClass ', Name: ' foo ', Value: ' Bar '});
alert (DT);
Running the code above will pop up <div name= "myID" ><span class= "MyClass" >foo bar</span></div> to describe the replacement success.
But if you have such a template data:
Copy Code code as follows:
{ID: ' myID ', Cls:{o: ' MyClass '}, Name: ' foo ', Value: ' Bar '}
We want to replace the central part of the template with the CLS portion of the CLS.O value, that is, MyClass, what do we do? is not want to use {CLS.O} directly, you can try, absolutely invalid, no replacement. Because the template matching substitution is directly matching the string preceding the colon in {} to the JSON variable. Of course I can't find cls.o this string so I can't match it.
Fortunately, template supports the parsing of data.
We can define an analytic function ourselves. It's actually very simple:
Copy Code code as follows:
var t = new Ext.template (
' <div name= ' {id} ' > ',
' <span class= ' {Cls:this.parseJSON} ' >{name} {value}</span> ',
' </div> '
);
T.parsejson=function (data) {return DATA.O};
var dt=t.apply ({id: ' myID ', cls: {o: ' MyClass '}, Name: ' foo ', Value: ' Bar '});
Alert (DT)
We define a parsing method called Parsejson, which accesses the top-level CLS in the template and then processes the value of the CLS (which is an object) (directly accessing its O property).
