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

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 if="header == 0">',
update the img here below
'<img src="noimage.png"/>',
'<div class="event-content">',
'<p>{venue} {geolocated_city}</p>',



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

getGroupString: function(record){

return record.get('date');


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

reader: {
type: 'json'

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,

//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