Ext.list.Treeストアとテンプレート

Question

Ext JS 6のリストでは、Touch 2.4 Ext.Listなどと比べてもうリストはありません。だから私が今しようとしているのは、トレストアを作成してExt.list.Treeにバインドすることです。これはうまくいくように思えますが、リスト項目にテンプレートを設定する方法はわかりません。私は、次のコードをしました：

私のモデルは次のようになります。

Ext.define('User', { 
    extend: 'Ext.data.Model', 
    fields: [ 
     {name: 'name', type: 'string'}, 
     {name: 'phoneNumber', type: 'string'} 
    ] 
}); 

次の私はいくつかのデータをしました：

var data = { 
    users: [ 
     { 
      name: 'Ed Spencer', 
      phoneNumber: '555 1234' 
     }, 
     { 
      name: 'Abe Elias', 
      phoneNumber: '666 1234' 
     } 
    ] 
}; 

次は店の定義です：

var store = Ext.create('Ext.data.TreeStore', { 
    autoLoad: true, 
    model: 'User', 
    data : data, 
    expanded: true, 
    defaultRootProperty: 'users', 
    proxy: { 
     type: 'memory', 
     reader: { 
      type: 'json', 
      rootProperty: 'users' 
     } 
    } 
}); 

最後に、トレイルリストにストアをバインドします。

var list = Ext.create('Ext.list.Tree', { 
    title: 'simple list', 
    store: store, 
    width: '200px', 
    height: '400px', 
    renderTo: Ext.getBody(), 
    itemTpl: '{name}' 
}); 

文書を調べると、リストに自動的に表示されるテキストプロパティを指定する必要があるように見えますが、テキストだけを表示したくない場合は、名前と電話番号の組み合わせを作成したいこの例では、

私はリスト/ツリーに自分のデータを表示する方法がわからないので、今私はどのように続行するのか分かりません。うまくいけば誰かが助けることができる。私はSencha Fiddleを利用しています：https://fiddle.sencha.com/#fiddle/1el1

Answer 1

代わりに、Ext.list.TreeではなくExt.List/Ext.dataview.Listを使用します。私は古典的なドキュメントを見ていましたが、私は現代のドキュメントを見ていなければなりません。

は、私は今、次のストアがあります。

var store = Ext.create('Ext.data.Store', { 
    autoLoad: true, 
    model: 'User', 
    data : data, 
    proxy: { 
     type: 'memory', 
     reader: { 
      type: 'json', 
      rootProperty: 'users' 
     } 
    } 
}); 

を、以下のリストにレンダリング：

// don't render the list, but add it to the viewport instead 
Ext.Viewport.add(Ext.create('Ext.List', { 
    title: 'simple list', 
     store: store, 
     itemTpl: '{name}, {phoneNumber}' 
})); 

モデルとデータが同じままに。

それが正しく表示されますので、私はまた、フィドルを更新しました：https://fiddle.sencha.com/#fiddle/1el1