PDA

View Full Version : List Selections and loading new views (e.g. Maps tab).



jeffj
18 Oct 2010, 1:59 PM
I am trying to make a touch selection in a list view load my apps google map tab and open a google Infowindow bubble for the given selection. I have been looking at the kiva app for some pointers ut have yet to find a good tutorial or explanation of selection methods.

What I know now is I need to be working with something like the "selectionchange" param in the Ext.list to call the tab and open the infowindow. MY app is based of the guide app in sencha touch.

What I have:




Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
var timeline = new Ext.List({
title: 'Deal List',
cls: 'timeline',
scroll: 'vertical',
singleSelect: true,
itemSelector: 'div.tweet',
tpl: [
'<tpl for=".">',
'<div class="tweet">',
'<tpl for="gd$customProperty[4]">',
'<div class="avatar"><img src="{[values["$t"]]}"/></div>',
'</tpl>',
'<div class="tweet-content">',
'<h2>{from_user}</h2>',
'<tpl for="gd$customProperty[0]">',
'<h2>{[values["$t"]]}</h2>',
'</tpl>',
'<p>{category}</p>',
'</div>',
'</div>',
'</tpl>'
],
});






var refresh = function() {
// var coords = position || map.geo.coords;
// if (coords) {
// map.update(coords);

Ext.util.JSONP.request({
url: 'http://maps.google.com/maps/feeds/features/110714523030907152027/0004910ab55c9b338860d/snippet',
callbackKey: 'callback',
params: {
lat: map.map.getCenter().lat() ,
lng: map.map.getCenter().lng() ,
radius: '100000' ,
alt: 'json',
},
callback: function(data) {
if (data && data.feed.entry && !!data.feed.entry.length) {
var entry = data.feed.entry

// Update the tweets in timeline
timeline.update(entry);

// Add points to the map
for (var i = 0, ln = entry.length; i < ln; i++) {
addMarker(entry[i]);
}
} else {
timeline.getContentTarget().update('No Results Available');
}
}
});
// }
};

infowindow = new google.maps.InfoWindow({
content: 'Sencha Touch HQ'
});

var map = new Ext.Map({
title: 'Map',
getLocation: true,
mapOptions: {
zoom: 15
},
listeners: {
maprender: function(mapC, map) {
refresh();
// this.geo.on('update', refresh);



}
}
});

;

var panel = new Ext.TabPanel({
fullscreen: true,
animation: 'cardslide',
items: [map, timeline]
});


var markers = {};
// These are all Google Maps APIs
var addMarker = function(entry) {

var pos = entry.content.kml$Placemark[0].kml$Point[0].kml$coordinates[0].$t.split(',');


var marker = new google.maps.Marker({
map: map.map,
title: 'whatever',
clickable: true,
position: new google.maps.LatLng(pos[1], pos[0]),
Icon: entry.gd$customProperty[4].$t
});



google.maps.event.addListener(marker, "click", function() {
tweetBubble.setContent(entry.gd$customProperty[0].$t);
tweetBubble.open(map.map, marker);
});

};

// I have no clue why I need to define tweetbubble outside var add marker (cite: http://github.com/nelstrom/GeoTweets/blob/5b6db3cf0850861d008ca4e5b1c1a57b31bc1afd/javascripts/geotweets.js_
tweetBubble = new google.maps.InfoWindow(
);

var tabBar = panel.getTabBar();
tabBar.addDocked({
cls: 'refreshBtn',
xtype: 'button',
ui: 'plain',
iconMask: true,
iconCls: 'refresh',
dock: 'right',
stretch: false,
align: 'center',
handler: refresh
});
tabBar.doComponentLayout();
}
});

evant
18 Oct 2010, 9:19 PM
Listen to the itemtap event on the list.

jeffj
19 Oct 2010, 9:27 AM
Right so I have the event listener and the alert gives me the message.


var timeline = new Ext.List({
title: 'Deal List',
cls: 'timeline',
scroll: 'vertical',
singleSelect: true,
itemSelector: 'div.tweet',
listeners: {
"itemtap": function(list, index, item, e) {

alert('itemtap');
}
},
tpl: [
'<tpl for=".">',
'<div class="tweet">',
'<tpl for="gd$customProperty[4]">',
'<div class="avatar"><img src="{[values["$t"]]}"/></div>',
'</tpl>',
'<div class="tweet-content">',
'<h2>{from_user}</h2>',
'<tpl for="gd$customProperty[0]">',
'<h2>{[values["$t"]]}</h2>',
'</tpl>',
'<p>{category}</p>',
'</div>',
'</div>',
'</tpl>'
],
});

but I still am unsure how to:

a. Pop the map view. (something with the "map" variable no doubt)

b. Open the corresponding Infowindow for the map marker.