Method to enable Ext's Template to parse second-layer json data_json

Ext's Template supports template replacement by passing in json data.
There is such an example in the API:

Copy code The code is as follows:

var t = new Ext.Template(
'

',
'{name:trim} {value :ellipsis(10)}',
'

'
);
t.append('some-element', {id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'});

Slightly modify it for a test:

Copy code The code is as follows:

var t = new Ext.Template(
'

',
'{name} {value}',
'

'
) ;
var dt=t.apply({id: 'myid', cls: 'myclass', name: 'foo', value: 'bar'});
alert(dt);

Running the above code will pop up

foo bar

indicating that the replacement is successful.

But if there is another template data like this:

Copy code The code is as follows:

{id: 'myid', cls:{o:'myclass'}, name: 'foo', value: 'bar'}

us I want to replace the original cls part in the template with the value of cls.o, which is myclass. How to do this? Do you want to use {cls.o} directly? You can try it. It will definitely not work and there is no replacement. Because template matching and replacement directly matches the string before the colon in {} and the JSON variable. Of course, the string cls.o cannot be found, so it cannot be matched.
Fortunately, Template supports data parsing and processing.
We can just define an analytical function ourselves. It’s actually very simple:

Copy code The code is as follows:

var t = new Ext.Template(
'

',
'{name} {value} ',
'

'
);
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, which is to access the top-level cls in the template and then process the value of cls (which is an object) (directly access its o attribute).