extjs - ダイナミックディテールカードの作成

Question

ネストされたリストが使用しているのと同じjsonストアからデータをプルするネストされたリストの動的詳細カードを作成する方法はありますか？

ネストされたリストと10個の質問を使用するアプリを作成しています。各質問には、コピーと画像で構成される独自の回答があります。

各回答で、jsonファイルからコピーとimgファイル名を取得する詳細カードを使用したいと思います

誰でも助けることができます-ありがとう

Answer 1

コントローラーを使用して、リストでitemtapイベントを使用できます。割り当てられたハンドラーがレコードを受け取ります。

そこから Ext.Panel を開くことができます。このパネルの構成では、データは最初は空のオブジェクトである必要があり、tplはデータを受け取ることができます。

セットアップが完了したら、setData() メソッドを使用してデータを新しいパネルに追加できます。

コントローラ メソッドは次のようになります。

/**
 * Show the details
 * @param cmp the tapped component
 * @param index the index of the item
 * @param target the target tapped
 * @param record the record tapped
 */
onListItemTapped: function(cmp, index, target, record) {
    var recordData = record.getData(),
        detailView = Ext.create('MyProject.view.DetailView');

    detailView.setData(recordData);
    Ext.Viewport.add(detailView);
}

Ext.Panel のビューの構成は次のようになります。

{
    styleHtmlContent: true,
    data: {},
    tpl: [
        '<h3>{question}</h3>',
        '<p>{answerCopy}</p>',
        '<img src="{answerImageUrl}">',
     ].join("")
 }