Enable ext template to parse layer-2 JSON data

EXT template supports template replacement by passing in JSON data.
There is an example in the API:

CopyCode The Code is as follows: var T = new Ext. template (
'<Div name = "{ID}"> ',
'<SPAN class = "{CLS}"> {Name: trim} {value: ellipsis (10)} </span> ',
'</Div>'
);
T. append ('some-element', {ID: 'myid', CLS: 'myclass', name: 'foo', value: 'bar '});

Make some modifications and perform a test:

Copy code The Code is 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 );

When you run the above Code, <Div name = "myid"> <SPAN class = "myclass"> Foo bar </span> </div> is displayed, indicating that the replacement is successful.

However, if another template data is as follows:

Copy code The Code is as follows: {ID: 'myid', CLS: {o: 'myclass'}, name: 'foo', value: 'bar '}

We want to replace the original CLS part of the template with the CLS. O value, that is, myclass. What should we do? Do you want to use {Cls. O} directly? You can try it. It is definitely invalid and has not been replaced. Because template matching and replacement directly match the string before the colon in {} with the JSON variable. Of course, the CLS. O string cannot be found, so it cannot be matched.
Fortunately, the template supports data parsing.
We can define a resolution function by ourselves. It is actually very simple:

Copy codeThe Code is 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 have defined a parsing method called parsejson. Access the top-level CLS in the template and then process the CLS (an object) value (directly access its o attribute.