Media Element Inside list item help!!!!!!!!!!!!!!!!

[Megajayeultra]

I am building a nested list with media items inside each element and I do not know where I am going wrong.
Some one please help me. My code is



Ext.define('ListItem', {
extend: 'Ext.data.Model',

requires: [
'Ext.TitleBar',
'Ext.Video'
],
config: {
xtype:'container',
fields: ['text'],
title: 'Device',
iconCls: 'action',
items: {
docked: 'top',
xtype: 'titlebar',
title: 'Cloud Content',
},
}
});

var treeStore = Ext.create('Ext.data.TreeStore', {
model: 'ListItem',
defaultRootProperty: 'items',
root: {
items: [
{
text: 'Audio',
items: [
{
text: 'Water',
items: [
{ text: 'Still', leaf: true },

]
},

]
},
{
text: 'Videos',
items: [
{ text: 'Nuts', leaf: true },

]
},

{
text: 'Ebooks',
items: [
{ text: 'Nuts', leaf: true },

{
xtype:'video',
url:['http://www.youtube.com/watch?v=_cy8vpVS1Iw&feature=related'],
loop:true,
}
]
}
]
}
});

Ext.create('Ext.NestedList', {
fullscreen: true,
store: treeStore
});

[scottmartin]

Where is Ext.video coming from?
xtype:'video',

What is the problem you are facing .. the link does not load?



xtype: 'box',
autoEl: {
tag: 'a',
href: 'javascript:;',
html: 'LINK'
},
listeners: {
click: {
element: 'el',
fn: function() {
var myWin = Ext.create("Ext.window.Window", {
title: 'HTML Window',
modal: true,
html: '<iframe src="http://www.sencha.com" width="100%" height="100%" ></iframe>',
width: 700,
height: 500
});
myWin.show();
}
}
}​


Scott.