PDA

View Full Version : How to create button functionality from an HTML button?



kevinjset
10 Jan 2012, 3:25 PM
Hey all! Attached below is my code for a working map:


App.views.HomeLocations = Ext.extend(Ext.Panel, {
layout: 'fit',

initComponent: function() {
infowindowP1 = new google.maps.InfoWindow({
content: '<p>Location2</p>' +
'<input type="button" value="Route Me From Location1" id="go" onclick="test();">'
}),

toolbar = new Ext.Toolbar({
dock: 'top',
xtype: 'toolbar',
ui: 'light',
defaults: {
iconMask: true
},
items: [
{
text: 'Show Locations!',
ui: 'confirm',
handler: function() {
Marker2.setMap(mapdemo.map);
}
},
{
text: 'Directions',
ui: 'confirm',
handler: function() {
var directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();
var start = Location1;
var end = Location2;
var request = {
origin:start,
destination:end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
directionsDisplay.setMap(mapdemo.map);
}
},
{ xtype: 'spacer' },
{
text: 'Hide Locations!',
ui: 'confirm',
handler: function() {
Marker2.setMap(null);
},
}
]
});
var Marker2;
var Location1 = new google.maps.LatLng(34.155284, -118.143411);
var Location2 = new google.maps.LatLng(33.821656, -118.033848);
var mapdemo = new Ext.Map ({
mapOptions: {
center: Location1,
mapTypeId: google.maps.MapTypeId.ROADMAP,
zoom: 9
},

listeners: {
maprender: function (comp, map) {
Marker2 = new google.maps.Marker({
position: Location2,
map: mapdemo.map
});

google.maps.event.addListener(Marker2, 'mousedown', function() {

var directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();
infowindowP1.open(mapdemo.map, Marker2);

google.maps.event.addDomListener(document.getElementById("go"), 'mousedown', function() {
alert("test 1");
var start = Location1;
var end = Location2;
var request = {
origin: start,
destination: end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
alert('Error generating directions: ' + status);
}
});
directionsDisplay.setMap(mapdemo.map);
});

});
Marker2.setMap(null);
},
},
});

this.dockedItems = [toolbar],
this.items = [mapdemo],
App.views.HomeLocations.superclass.initComponent.call(this);
},

test: function () {
alert("test123");
},

styleHtmlContent: true,
style: "background-color: #ADB4C3;",
});
Ext.reg('HomeLocations', App.views.HomeLocations);

This is a working map with three buttons on the top toolbar: Show Locations!, Directions, and Hide Locations!. I'm fully able to hide and show Marker2 as I please, and when I click on the Directions button, it'll show me the route from Location1 -> Location2, which is all great. My primary question is this: when you click on "Show Locations!", you should see an infoWindow that says Location2, and an html button that says "Route Me From Location1". Ideally, when you click this button, it should show an alert("test 1") and show the route from Location1 to Location2 through the following code:


google.maps.event.addDomListener(document.getElementById("go"), 'mousedown', function() {
alert("test 1");
var start = Location1;
var end = Location2;
var request = {
origin: start,
destination: end,
travelMode: google.maps.DirectionsTravelMode.DRIVING
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
} else {
alert('Error generating directions: ' + status);
}
});
directionsDisplay.setMap(mapdemo.map);
});

As of right now, the html button "Route Me From Location1" doesn't work. Notice when I initiate a new infoWindow called infoWindowP1, I have coded "onclick: "test();" thinking that by clicking this, it will generate an alert("test123").


test: function () {
alert("test123");
},


I did this solely to test the html button to see if it worked. Unfortunately, nothing happened. Also, I don't know if I need to use "google.maps.event.addDomListener" because it just doesn't work with my code.

How would I create button functionality for this html button? Any help is appreciated.

mitchellsimoens
11 Jan 2012, 7:49 AM
You can add a tap listener to any element, the trick is to resolve the button...


el.on('tap', function() {}, scope);