Image Gallery in sencha touch XTemplate Issue

Question

I am quite new to sencha touch and still exploring the way through.

I am building an app having a gallery using sencha touch(5.1) +phonegap and testing on iPhone.

I have this created in my dataview.

itemTpl: [
        '<div class="Capture">',
            '{dateStamp:date("F j, Y")}<br>',
            '<tpl if="medias.length == 0">No Moments Captured</tpl>',
            '<tpl for="medias">',
                '<p>{#}: </p>', 
                 '<tpl if="type == \'i\'"><img src="{url}" width="100" height="100"/></tpl>',
                 '<tpl if="type == \'v\'"><video src="{appUrl}"  height="100" width="100"/></tpl>',
               '</tpl>',

        '</div>',

    ],

Input : var data = { dateStamp: 'Wed Apr 15 2015 17:53:44 GMT+0530 (IST)',

medias: [
    { type: "i",  url: "", appUrl:"" },
    { type: "i",  url: "", appUrl:"" },
    { type: "v",  url: "", appUrl:"" },
    { type: "v",  url: "", appUrl:"" },
    { type: "v",  url: "", appUrl:"" },
]

};

type has values i and v depicting image and video.

->

1. If all the media records are that of image it works fine.
2. If first 2 records of media are image and rest video then only 2 images and one video are shown and rest I don't see anything.
3. If first is image and then rest are video then only first image and next video is shown.

Basically once it detects video then the rest of the things after that record is not shown.

Can Anyone guide me where I am going wrong? Thanks for your help:)

Answer 1

This is quite silly. The only change I did is this '<tpl if="type == \'v\'"><video src="{appUrl}" height="100" width="100"></video></tpl> for it to work.