ExtのTemplateを二層のjsonデータを解析できるようにする方法


ExtのTemplateは、jsonデータが入る方式でテンプレート置換をサポートしています。APIには、

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'}); 
が上のコードを実行すると、上のコードがイジェクトされるという修正テストを行う例がある。 name="myid"は交代成功を説明します。しかし、もしもう一つのテンプレートデータがあるとしたら、

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); 
の代わりにテンプレートの中原cls部分をcls.oの値、つまりmyclassに置き換えたいですが、どうすればいいですか?直接に{cls.o}を使いたいですか?試してみてもいいです。絶対無効です。換えはありません。templateマッチング置換は、{}の中のコロン前の文字列とJSON変数を直接マッチングするためです。もちろん、cls.oという串が見つからないので、合わせられません。幸いにもTemplateはデータの解析処理をサポートしています。私たちは自分で解析関数を定義すればいいです。実は簡単です。

{id: 'myid', cls:{o:'myclass'}, name: 'foo', value: 'bar'} 
はパースJSONという解析方法を定義しています。テンプレートでトップクラスのclsにアクセスして、clsの値を処理してもいいです。