PDA

View Full Version : Map Problem! Need for Help~



faniky
8 Aug 2010, 12:49 AM
I am trying to use Map in my Sencha Touch App, but a problem puzzled me.

The problem is:
when i tap the list item to goto the detail, i update the map`s center in order to view different position according to the data from different people. The first time it works! the map`s center, but when i tap the "Back" button to go back and going to the other list item, the information is updated but the map`s center is same, means the map`s center don`t change even if I change the map`s property in the second time.

the main code mentioned above is this:



listeners: {
itemtap: function(view, index, item, e){
var rec = view.store.getAt(index);
var test1=rec.get('Latitude');
var test2=rec.get('Longitude');
var mapPosition = new google.maps.LatLng(test1, test2);
map.mapOptions.center = mapPosition;
map.center = mapPosition;
testCard.setCard(1);
detail.update({
firstName: rec.get('firstName'),
lastName: rec.get('lastName'),
Latitude: rec.get('Latitude'),
Longitude: rec.get('Longitude'),
});

}


I am wondering if anyone could help me!
Maybe the different method to change the detail value could workable!

Many Thanks!!!

Here is my code:




Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,

onReady: function(){

Ext.regModel('Contact', {
fields: ['firstName', 'lastName', 'Latitude', 'Longitude']
});

var list = new Ext.List({
tpl: '<tpl for="."><div class="contact"><strong>{firstName}</strong> {lastName}</div></tpl>',
itemSelector: 'div.contact',

singleSelect: true,

store: new Ext.data.Store({
model: 'Contact',

getGroupString: function(record){
return record.get('firstName')[0];
},

data: [{
firstName: 'Tommy',
lastName: 'Maintz',
Latitude: '0',
Longitude: '32'
}, {
firstName: 'Ed',
lastName: 'Spencer',
Latitude: '32',
Longitude: '100'
}, {
firstName: 'Jamie',
lastName: 'Avins',
Latitude: '34',
Longitude: '2'
}, {
firstName: 'Aaron',
lastName: 'Conran',
Latitude: '56',
Longitude: '2'
}]
}),
listeners: {
itemtap: function(view, index, item, e){
var rec = view.store.getAt(index);
var test1=rec.get('Latitude');
var test2=rec.get('Longitude');
var mapPosition = new google.maps.LatLng(test1, test2);
map.mapOptions.center = mapPosition;
map.center = mapPosition;
testCard.setCard(1);
detail.update({
firstName: rec.get('firstName'),
lastName: rec.get('lastName'),
Latitude: rec.get('Latitude'),
Longitude: rec.get('Longitude'),
});

}
}
});

var map = new Ext.Map({
score: this,
mapOptions: {
disableDefaultUI: true,
zoom: 10,
},
});

var detailMap = new Ext.Panel({
floating: true,
//modal: true,
centered: false,
width: 500,
height: 500,
items:[map],
});
//overlay end

var detail = new Ext.Panel({
tpl: '<tpl for=".">First: {firstName}<br />Last: {lastName}<br />Latitude: {Latitude}<br />Longitude: {Longitude}</tpl>',
hidden: true,
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
title: 'Details',
items: [{
text: 'Back',
handler: function(){
testCard.setCard(0);
}
},
{xtype: 'spacer'},
{

text: 'Map',
handler: function() {

if (!this.popup) {
this.popup = detailMap;
}
this.popup.show('pop');
}

}]
}],
});

var testCard = new Ext.Panel ({
fullscreen: true,
layout: 'card',
animation: 'slide',
items:[list, detail]
});
} // ends onReady: function()
}); // ends Ext.setup

faniky
8 Aug 2010, 9:22 PM
Am I missing some points?

evant
8 Aug 2010, 9:43 PM
You need to use the setCenter method on the map class:

http://code.google.com/apis/maps/documentation/javascript/reference.html#Map




Ext.setup({
icon: 'icon.png',
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
glossOnIcon: false,

onReady: function(){

Ext.regModel('Contact', {
fields: ['firstName', 'lastName', 'Latitude', 'Longitude']
});

var list = new Ext.List({
tpl: '<tpl for="."><div class="contact"><strong>{firstName}</strong> {lastName}</div></tpl>',
itemSelector: 'div.contact',

singleSelect: true,

store: new Ext.data.Store({
model: 'Contact',

getGroupString: function(record){
return record.get('firstName')[0];
},

data: [{
firstName: 'Tommy',
lastName: 'Maintz',
Latitude: '0',
Longitude: '32'
}, {
firstName: 'Ed',
lastName: 'Spencer',
Latitude: '32',
Longitude: '100'
}, {
firstName: 'Jamie',
lastName: 'Avins',
Latitude: '34',
Longitude: '2'
}, {
firstName: 'Aaron',
lastName: 'Conran',
Latitude: '56',
Longitude: '2'
}]
}),
listeners: {
itemtap: function(view, index, item, e){
var rec = view.store.getAt(index);
var test1 = rec.get('Latitude');
var test2 = rec.get('Longitude');
var mapPosition = new google.maps.LatLng(test1, test2);
if (map.map) {
map.map.setCenter(mapPosition);
}else{
map.mapOptions.center = mapPosition;
}
testCard.setCard(1);
detail.update({
firstName: rec.get('firstName'),
lastName: rec.get('lastName'),
Latitude: rec.get('Latitude'),
Longitude: rec.get('Longitude'),
});

}
}
});

var map = new Ext.Map({
score: this,
mapOptions: {
disableDefaultUI: true,
zoom: 10,
},
});

var detailMap = new Ext.Panel({
floating: true,
//modal: true,
centered: false,
width: 500,
height: 500,
items: [map],
});
//overlay end

var detail = new Ext.Panel({
tpl: '<tpl for=".">First: {firstName}<br />Last: {lastName}<br />Latitude: {Latitude}<br />Longitude: {Longitude}</tpl>',
hidden: true,
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
title: 'Details',
items: [{
text: 'Back',
handler: function(){
testCard.setCard(0);
}
}, {
xtype: 'spacer'
}, {

text: 'Map',
handler: function(){

if (!this.popup) {
this.popup = detailMap;
}
this.popup.show('pop');
}

}]
}],
});

var testCard = new Ext.Panel({
fullscreen: true,
layout: 'card',
animation: 'slide',
items: [list, detail]
});
} // ends onReady: function()
}); // ends Ext.setup

faniky
8 Aug 2010, 9:51 PM
Problem solved, thanks very much!!!