PDA

View Full Version : getting data from store & model to show markers on a map (json)



nickbalestra
17 Jun 2011, 7:41 AM
Hello Guys, this is my first time ever sencha work.
I am integrating it with a joomla extension based on nooku fw (https://nooku.assembla.com/) .
my extension output a list of item in json, i was able to to display them in sencha:




onReady: function() {
Ext.regModel('Event', {
fields: [
{name: 'id', type: 'string'},
{name: 'venue', type: 'string'},
{name: 'geolocated_city', type: 'string'},
{name: 'header', type:'string'},
{name: 'description', type: 'string'},
{name: 'title', type: 'string'},
{name: 'date', type: 'string'},
{name: 'start', type: 'string'},
{name: 'latitude', type: 'float'},
{name: 'longitude', type: 'float'},

]
});

var itemTemplate = new Ext.XTemplate(
'<tpl for=".">',
'<div class="event">',
'<div class="flyer">',
'<tpl if="header != 0">',
'<img src="../_thumbs/{header}"/>',
'</tpl>',
'<tpl if="header == 0">',
update the img here below
'<img src="noimage.png"/>',
'</tpl>',
'</div>',
'<div class="event-content">',
'<h2>{title}</h2>',
'<p>{venue} {geolocated_city}</p>',
'</div>',
'</div>',

'</tpl>'

);



var jsonStore = new Ext.data.Store({
model: "Event",

getGroupString: function(record){

return record.get('date');

},

proxy: {
type: 'ajax',
url: '../index.php',


reader: {
type: 'json'

},
extraParams:{
option: 'com_foo',
view: 'itemlist',
format: 'json'
},



},


autoLoad: true
});

var eventsPanel = {
title: "Events",
items: [
{
xtype: 'list',
scroll: 'vertical',
layout: 'fit',
fullscreen: true,
grouped: true,
indexBar: false,
store: jsonStore,
itemTpl:itemTemplate,

//singleSelect: true,

onItemDisclosure: function (record) {

}


}
]
};




as you can see from the model i have latitude and longitude stored, how can i use them to add markers to a map panel ? thanks for anyhelp but i am having problem creating an array of markers from what i've loaded trough ajax & json and put them on a map.

thanks in advance, Nick