Video inside of a nestedList

Hi

I am trying to follow an example that I found on the NestedList.

I would like to know if I wanted a video for the detail Card how would I do this?

For example if you click on the leaf ( Sparkling ) a video would come up about Sparking water.

This example is giving a way to change the html text. But how would I change it if I did not want to do just text.

Thanks

Jim

Ext.define('TuT.controller.NestedList', {

extend: 'Ext.app.Controller',

config: {

refs: {

nestedList: 'nestedList'

},

control: {

'nestedList':{

leafitemtap: function(nestedList, list, index, target, record) {

var detailCard = nestedList.getDetailCard();

detailCard.setHtml('You selected: ' + record.get('text'));

},

}

});

Ext.define('TuT.model.ListItem', {

extend: 'Ext.data.Model',

config:{

fields:[ 'text']

}

});

Ext.define('TuT.store.TreeStore', {

extend: 'Ext.data.TreeStore',

config: {

model: 'TuT.model.ListItem',

defaultRootProperty:'items',

root: {

items: [

{

text: 'Drinks',

items: [

{

text: 'Water',

items: [

{ text: 'Still', leaf: true },

{ text: 'Sparkling', leaf: true },

]

},

{ text: 'Soda', leaf: true }

]

},

{

text: 'Snacks',

items: [

{ text: 'Nuts', leaf: true },

{ text: 'Pretzels', leaf: true },

{ text: 'Wasabi Peas', leaf: true}

]

}

]

}

}

});

Ext.define('TuT.view.NestedList',{

extend:'Ext.NestedList',

xtype:'nestedList',

config:{

title:'NestedList',

iconCls:'star',

fullscreen: true,

scrollable:true,

styleHtmlContent:true,

styleHtmlCls:'homepage',

displayField: 'text',

store: 'TreeStore',

detailCard:{

xtype:'panel',

styleHtmlContent: true,

scrollable: true,

html: 'Hey buddy'

}

}

});//

Video inside of a nestedList