[JavaScript] sencha Touch2

onip · 21. Mai 2012

sencha Touch2

hi,

beschäftige mich gerade etwas mit sencha Touch2.
ich versuch in einer NestedList den inhalt auszugeben.
folgender code ist die NestedList mit listener.

HTML:

Ext.application({
 name: 'Sencha',
 glossOnIcon: false,
 icon: {
 57: 'resources/icons/icon.png',
 72: 'resources/icons/icon@72.png',
 114: 'resources/icons/icon@2x.png',
 144: 'resources/icons/icon@114.png'
 },

 phoneStartupScreen: 'resources/loading/Homescreen.jpg',
 tabletStartupScreen: 'resources/loading/Homescreen~ipad.jpg',

 requires: [
 'Ext.data.TreeStore',
 'Ext.NestedList',
 'Ext.TitleBar',
 'Ext.Panel',
 'Ext.Video'
 ],


 launch: function() {
 var data = {
 text: 'Groceries',
 items: [{
 text: 'Drinks',
 leaf: true,
 xtype: 'video',
 data: {
 urls : [
 'resources/media/BigBuck.m4v',
 'resources/media/BigBuck.webm'
 ],
 posterUrl: 'resources/media/cover.jpg'
 }
 }]
 };
 Ext.define('ListItem', {
 extend: 'Ext.data.Model',
 config: {
 fields: [
 {name: 'text',type: 'string'},
 {name: 'leaf',type: 'boolean'},
 {name: 'xtype',type: 'string'},
 {name: 'data',type: 'object'},
 ]
 }
 });
 
 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,
 detailCard: Ext.create('Ext.Container', {}),
 listeners: {
 leafitemtap: function(me, list, index, item, e) {
 var store = list.getStore(),
 record = store.getAt(index),
 detailCard = me.getDetailCard()
 
 //alert(record.get('data').posterUrl);
 
 detailCard.setHtml(record.get('xtype'));
 
 }
 }
 });
 }
});

meine informationen hab ich in folgenden objekt

HTML:

var data = {
 text: 'Groceries',
 items: [{
 text: 'Drinks',
 leaf: true,
 xtype: 'video',
 data: {
 urls : [
 'resources/media/BigBuck.m4v',
 'resources/media/BigBuck.webm'
 ],
 posterUrl: 'resources/media/cover.jpg'
 }
 }]
};

darin soll dann text, video und bilder galerie (carousel) eingetragen.

mit

HTML:

detailCard.setHtml(record.get('xtype'));

kann ich html code in den container eintragen. somit wäre die textausgabe erledigt.
ich hänge nun mit der ausgabe des video und carousel.
leider hab ich dazu nix gefunden und weiß nicht weiter.
vielleicht hat schon jemand erfahrung mit sencha Touch2 und kann mir weiterhelfen, danke.

// edit
hab's

HTML:

detailCard.removeAll();
detailCard.add(outObj);

zuerst entferne ich alle container einstellungen mit removeAll();
dann übergebe ich dem container neue informationen mit add(outObj);

outObj wir wie folgt erstellt:

HTML:

switch (record.get('xtype')){
 case 'text':
 outObj = {
 scrollable: true,
 html: record.get('data')
 };
 break;
 case 'video':
 outObj = {
 scrollable: true,
 xtype: 'video',
 url: [
 record.get('data').urls[0],
 record.get('data').urls[1]
 ],
 loop: false,
 posterUrl: record.get('data').posterUrl
 };
 break;
 case 'carousel':
 outObj = {
 scrollable: false,
 defaults: {
 flex: 1
 },
 items: record.get('data')
 };
 break;
};

läuft wie gewollt, danke für's vorbeischaun
~closed~

Anzeige

Nützliche Suchen

[JavaScript] sencha Touch2

Videos zum Themenbereich