PDA

View Full Version : Dynamic Carousel Data Problem



tmort
8 Sep 2011, 5:46 AM
I'm building a Wordpress site using Sencha Touch. I've created a plugin that converts the posts to JSON for the application to read.


In the Applications "Post View" I am loading post information (Title, Body, etc) and I would like to have a carousel that displays all the images within the array "images" I've put through the json within the post.


My application is using the MVC structure (because I like the feeling of my teeth being pulled) and so I need a list of posts to pass the data through onto the Single Posts panel, then get the Images array into the carousel.


**The goal is to select a post from the list, load the data into the postsingleview (currently working) and then load the images from that post into the carousel.**


Any and all suggestions much appreciated.


Here's what I have so far:


JSON:


{
id: 1
title: "Title Of the Post""
body: "<p>Lorem Ipsum body copy</p>"
date: "2011-08-08 04:46:48"
user: "john"
addr: "12345 SW 123 ST"
funfact: "fun fact lore ipsum"
crossst: "X and Y"
history: "Lorem Ipsum"
architect: "Jane Doe"
comments: ""
deals: ""
-? images: [
-? {
image_url: "http://localhost:8888/wp-content/files_mf/imgone.jpg"
}
-? {
image_url: "http://localhost:8888/wp-content/files_mf/img2.jpg"
}
-? {
image_url: "http://localhost:8888/wp-content/files_mf/img3.jpg"
}
-? {
image_url: "http://localhost:8888/wp-content/files_mf/img4.jpg"
}
-? {
image_url: "http://localhost:8888/wp-content/files_mf/img5.jpg"
}
-? {
image_url: "http://localhost:8888/wp-content/files_mf/img6.jpg"
}
]
}


PostListView:



App.views.PostListView = Ext.extend(Ext.Panel, {

postStore: Ext.emptyFn,
postList: Ext.emptyFn,
id:'postlistview',
layout: 'card',

initComponent: function () {

this.postList = new Ext.List({
store: App.stores.postStore,
grouped: true,
emptyText: '<div style="margin:5px;">No notes cached.</div>',
onItemDisclosure: true,
indexBar: true,
itemTpl: '<div class="list-item-title">{title}</div>',

});

this.postList.on('disclose', function (record) {
this.onViewPost(record);
}, this),

this.items = [this.postList];

App.views.PostListView.superclass.initComponent.call(this);
},

onViewPost: function (record) {

Ext.dispatch({
controller: App.controllers.masterController,
action: 'viewpost',
record: record,
});
},

});


Master Controller with "ViewPost" action:






'viewpost': function (options) {

App.views.postSingleView.bodycard.update(options.record.data);
App.views.postSingleView.funfactcard.update(options.record.data);
App.views.postSingleView.crosscard.update(options.record.data);
App.views.postSingleView.historycard.update(options.record.data);
App.views.postSingleView.architectcard.update(options.record.data);
App.views.postSingleView.commentcard.update(options.record.data);
App.views.postSingleView.dealscard.update(options.record.data);

App.views.postView.setActiveItem(
App.views.postSingleView,
{ type: 'slide', direction: 'left' }
);
},


Post Single View (Which displays the data from the post)





App.views.PostSingleView = Ext.extend(Ext.Panel, {

title:'Single Post',
id:'postsingleview',
layout:{
type:'vbox',
align:'stretch',
pack:'end'
},
defaults: { flex: 1 },

initComponent: function () {

this.bodycard = new Ext.Component({
title:'Info',
scroll:'vertical',
cls : 'card bottomcard card3',
iconCls:'info',
tpl: '<tpl for=".">' +
'<div id="bottomcard-container">{body}</div>' +
'</tpl>',
});

[... There are 7 Ext.Components, but I want to keep it short so I'm deleting them so there isn't a mile long post ]


this.postSinglePanel = new Ext.TabPanel({
dock:'bottom',
id:'singlepost-bottompanel',
items:[
this.bodycard,
this.funfactcard,
this.crosscard,
this.historycard,
this.architectcard,
this.commentcard,
this.dealscard,

],
tabBar:{
dock:'bottom',
scroll:'horizontal',
layout:{
pack:'center',
},
},
});


var numberOfPages = 4;
// Create pages for the carousel
var pages = [];
for (var i=0; i<numberOfPages; i++) {
pages.push(new Ext.Component({
id: 'page'+i,
cls: 'page',
tpl: '<tpl for=".">{body}</tpl>',
}));
}

// Create the carousel
this.carousel = new Ext.Carousel({
id: 'carousel',
defaults: {
cls: 'card'
},
items: pages,
});

this.items = [this.carousel, this.postSinglePanel];

App.views.PostSingleView.superclass.initComponent.call(this);
},


});


Been beating my head against a wall on this one, any help much appreciated.