PDA

View Full Version : Audio and Video and NestedList



Megajayeultra
17 Jul 2012, 3:59 PM
Can someone help me and explain how would I add audio or video into a nested list. An example would be helpful.

scottmartin
18 Jul 2012, 9:19 PM
Can you be more specific?
Do you want icons that can be used to load audio/video to play?

Scott.

Megajayeultra
19 Jul 2012, 8:03 AM
Thanks for the reply but as after I click the audio or video nested link category I want an audio or. Keep to open

scottmartin
19 Jul 2012, 9:33 AM
Excuse my questions .. to open in a browser, to open in a ExtJS window?
ExtJS has no built-in media player if this is what you are asking for?

Scott.

Megajayeultra
19 Jul 2012, 1:22 PM
Actually the problem I am having is that I cant get my pages to link properly the whole NestedList page overtakes the application. Here is my code I hope you can help me.



Ext.define("NFC.view.cloud", {
extend:'Ext.Panel',
xtype: 'NestedList',

requires: [
'Ext.TitleBar',
],
config: {
title: 'Cloud',
iconCls: 'star',
tabBarPosition: 'bottom',
//cls:'home',
scrollable: true,
//styleHtmlContent: true,


items: {
docked: 'top',
xtype: 'titlebar',
title: 'Cloud Content',
},

}

});




Ext.define('NFC.view.cloud', {
extend: 'Ext.data.Model',
config: {
fields: ['text']


}
});














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

]
},

]
},


{
text: 'Video',
items: [
{ text: 'Video', leaf: true },

]

},
{
text: 'Ebook',
items: [
{ text: 'Ebook', leaf: true },
//{ Url:''},
]

}



]


}
});

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

scottmartin
21 Jul 2012, 9:49 AM
You will need to review how our class system works .. you have



Ext.define('NFC.view.cloud', {
extend:'Ext.Panel',
xtype: 'NestedList', // or use alias: 'widget.nestedlist'
..
});


To follow convention, you should not camel case xtype

Then you are trying to create this as an Ext class:


Ext.create('Ext.NestedList', {
..
});


where you should call it as


Ext.create('NFC.view.cloud', {
..
});


or use it as an xtype


Ext.create('Ext.panel.Panel', {
title: 'Hello',
width: 200,
items: [{
xtype: 'nestedlist'
}]
..
});


Here is a good article:
http://www.sencha.com/learn/sencha-class-system/

Scott.

Megajayeultra
21 Jul 2012, 6:23 PM
Okay here is my new code but both the nested list and panel will not display at the same time. Its either the nested list displays or the panel does

Ext.define("NFC.view.cloud", {
extend: 'Ext.Panel',
xtype: 'container',

config: {
title: 'Home',
iconCls: 'home',
}
});




var data = {
text: 'Groceries',
items: [{
text: 'Drinks',
items: [{
text: 'Water',
items: [{
text: 'Sparkling',
leaf: true
}, {
text: 'Still',
leaf: true
}]
}, {
text: 'Coffee',
leaf: true
}, {
text: 'Espresso',
leaf: true
}, {
text: 'Redbull',
leaf: true
}, {
text: 'Coke',
leaf: true
}, {
text: 'Diet Coke',
leaf: true
}]
}, {
text: 'Fruit',
items: [{
text: 'Bananas',
leaf: true
}, {
text: 'Lemon',
leaf: true
}]
}, {
text: 'Snacks',
items: [{
text: 'Nuts',
leaf: true
}, {
text: 'Pretzels',
leaf: true
}, {
text: 'Wasabi Peas',
leaf: true
}]
}]
};


Ext.define('ListItem', {
extend: 'Ext.data.Model',
config: {
fields: [{
name: 'text',
type: 'string'
}]
}
});


var store = Ext.create('Ext.data.TreeStore', {
model: 'ListItem',
defaultRootProperty: 'items',
root: data
});


var nestedList = Ext.create('Ext.NestedList', {
fullscreen: true,
title: 'Groceries',
displayField: 'text',
store: store
});