Creating a dynamic detail card

Question

Is there anyway to create a dynamic detail card for a nested list that pulls data from the same json store that the nested list is using?

im creating an app that using a nested list and 10 questions - each question has its own answer which consists of copy and an image.

i would like each answer to use a detail card that pulls the copy and img filename from the json file

can anyone help - thanks

Answer 1

You can use an itemtap event on your list by using the controller. The assigned handler will receive the record.

From there you can open a Ext.Panel, in the config of this panel the data should be initially an empty object, and the tpl can receive the data.

Once you've got that setup you can use the setData() method to add the data to your new panel.

The controller method would look something like this:

/**
 * 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);
}

The view's config for the Ext.Panel should look something like this:

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