Google maps markers and Sencha touch 2

[mescalito2]

I have an application made in Sencha Touch 2 that uses a Google Map. The map is going to display the position of several markers loaded from a JSON file with an Store. My question is, how can I read the markers from my Store? how can I use the data from the store to generate the markers?

This is what I have and IT IS WORKING FIND because I have an inline array "neighborhoods":

The Map:


Ext.define('MyApp.view.detalleMapa', {
extend: 'Ext.Map',
alias: 'widget.detallemapa',

config: {
listeners: [
{
fn: 'onMapMaprender',
event: 'maprender'
}
]
},

onMapMaprender: function(map, gmap, options) {

var neighborhoods = [
new google.maps.LatLng(52.511467, 13.447179),
new google.maps.LatLng(52.549061, 13.422975),
new google.maps.LatLng(52.497622, 13.396110),
new google.maps.LatLng(52.517683, 13.394393)
];


for (var i = 0; i < neighborhoods.length; i++) {
var m = neighborhoods[i];

new google.maps.Marker({
position: m,
map: gmap,
draggable: false,
animation: google.maps.Animation.DROP
});
}
}

});

The Store:


Ext.define('MyApp.store.itemsStore', {
extend: 'Ext.data.Store',
alias: 'store.itemsstore',
requires: [
'MyApp.model.modelo'
],

config: {
autoLoad: true,
model: 'MyApp.model.modelo',
storeId: 'itemsStoreId',
proxy: {
type: 'ajax',
url: '/markersJsonFormat.json',
reader: {
type: 'json',
rootProperty: ''
}
}
}
});

So far everything works fine because I use the array-markers "neighborhoods" into the map-class, but how can I use the array that was loaded by the store from the file 'markersJsonFormat.json'?

any idea?
Thanks! :)

PD: this is my app:


Ext.application({
requires: [
'MyApp.view.override.detalleMapa'
],

models: [
'modelo'
],
stores: [
'itemsStore'
],
views: [
'principalTabPanel',
'navegacionView',
'itemsLista',
'detalleMapa'
],
name: 'MyApp',

launch: function() {

Ext.create('MyApp.view.detalleMapa', {fullscreen: true});
}

});

[mitchellsimoens]

You can get the store via


var store = Ext.getStore('itemsStoreId');

Once the store loads you can iterate through it:


store.each(function(record) {
//add marker using record.get
});

[mescalito2]

Hi Mitchell!
Thanks for your answer, unfortunately I'm using Sencha Designer and in there getStore() does not work :( in the way you suggested.
Please watch this (3min) video where you can see the problem:

http://www.youtube.com/watch?v=zI6I6Y3eIQw - (3min)

Thanks!

[mescalito2]

Hi! do you have any idea why is not working what you suggested? Thanks!

[rafael.oropeza]

Did you try to invoke store.load() before store.each() .... ?

Bye.