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("")
 }