Hi, I'm trying to do an application with Sencha Touch 2. I have a different javascripts all doing a function.
My first .js is the custom view named MyView.js as follows:


Ext.define('KSDSSENCHA.view.MyView', {
extend: 'Ext.Panel',
//extend: 'Ext.Container',
xtype: 'myview',
scrollable: 'horizontal',
config: {
title: 'Rutas',
iconCls: 'maps',
scrollable: 'horizontal',
},
constructor: function() {
var me=this;
me.callParent(arguments);
var myTopBar=Ext.create('Ext.Toolbar', {
docked: 'top',
title: '........'
});
var myToolbar=Ext.create('Ext.Toolbar', {
docked: 'top',
scrollable: 'horizontal',
});
var myButton=Ext.create('Ext.Button', {
text: 'Home',
iconMask: 'true',
iconCls: 'home',
id: 'miBoton'
});
var myButton2=Ext.create('Ext.Button', {
text: '.......',
iconMask: 'true',
iconCls: 'delete',
id: 'miBotonMusic'
});
var myButton3=Ext.create('Ext.Button', {
text: '.....',
iconMask: 'true',
iconCls: 'action',
id: 'miBotonTiempo'
});
myToolbar.add([myButton, myButton2, myButton3]);
me.add([myTopBar, myToolbar]);
}
});

My second custom view is Localizacion.js as follows:



Ext.define('KSDSSENCHA.view.Localizacion', {
extend: 'Ext.Panel',
//extend: 'Ext.Container',
xtype: 'mylocalizacion',
requires: [
'Ext.device.Geolocation',
'Ext.device.Notification',
'Ext.Map',
'Ext.TitleBar',
'Ext.tab.Bar',
'Ext.SegmentedButton'
],
config: {
title: '......',
iconCls: 'star',
layout: 'fit',//pone el mapa
draggable: true,
useCurrentLocation: true
},
constructor: function() {
var me=this;
me.callParent(arguments);
var UAB= new google.maps.LatLng(41.500293,2.112582);
var myTopBar=Ext.create('Ext.Toolbar', {
docked: 'top',
title: '......'
});
var myToolbar=Ext.create('Ext.Toolbar', {
docked: 'top',
scrollable: 'horizontal'
});
var myButton=Ext.create('Ext.Button', {
text: 'Start Track',
iconMask: 'true',
iconCls: 'action',
id: 'miTrack',
action: 'watch'
});
var myButton2=Ext.create('Ext.Button', {
text: 'Mark',
iconMask: 'true',
iconCls: 'locate',
id: 'miMark'
});
var myButton3=Ext.create('Ext.Button', {
text: 'Actual Position',
iconMask: 'true',
iconCls: 'refresh',
id: 'miRefresh',
action: 'refresh'
});
var myMap=Ext.create('Ext.Map', {

mapOptions: {
center: UAB,
zoom: 3,
mapTypeId: google.maps.MapTypeId.HYBRID,
},
id: 'mapa'
});
myToolbar.add([myButton, myButton2, myButton3]);
me.add([myTopBar, myToolbar, myMap]);
}
});

My third view is the main one Main.js as follows:


Ext.define('KSDSSENCHA.view.Main', {
extend:'Ext.tab.Panel',
//extend: 'Ext.Container',
requires: [
'Ext.TitleBar',
'Ext.Video'
],
config: {
tabBarPosition: 'bottom',
scrollable: 'horizontal',
layout: {
type: 'card'
},
items: [
{
xtype: 'myview'
},
{
xtype: 'mylocalizacion'
}


]
}
});

My custom controller is Main.js as follows:


Ext.define('KSDSSENCHA.controller.Main', {
extend: 'Ext.app.Controller',
config: {
refs: {
miBoton: '#miBoton',
miTrack: '#miTrack',
miMark: '#miMark',
miRefresh: '#miRefresh',
},
control: {
miBoton: {
tap: 'mostrarAlerta'
},
miTrack: {
toggle: 'watchToggle'
},
miMark: {
tap: 'mostrarMarker'
},
'button[action=refresh]': /*Podría poner también miRefresh*/{
tap: 'refresh'
},
}
},
mostrarAlerta: function(){
Ext.Msg.alert('Volviendo a Inicio!');
},
mostrarMarker: function(map){
Ext.Msg.alert('Destino fijado en Marker!');
var pos= new google.maps.LatLng(41.500293,2.112582);
var marker= new google.maps.Marker({
position: pos,
map: map,
visible: true,
icon: 'darkgreen_MarkerL.png',
animation: google.maps.Animation.BOUNCE
});
}
});

And the main javascript is App.js as follows:


Ext.application({
name: 'KSDSSENCHA',


requires: [
'Ext.MessageBox'
],


views: ['Main', 'MyView', 'Localizacion'],
controllers: ['Main'],


icon: {
'57': 'resources/icons/Icon.png',
'72': 'resources/icons/Icon~ipad.png',
'114': 'resources/icons/Icon@2x.png',
'144': 'resources/icons/Icon~ipad@2x.png'
},


isIconPrecomposed: true,


startupImage: {
'320x460': 'resources/startup/320x460.jpg',
'640x920': 'resources/startup/640x920.png',
'768x1004': 'resources/startup/768x1004.png',
'748x1024': 'resources/startup/748x1024.png',
'1536x2008': 'resources/startup/1536x2008.png',
'1496x2048': 'resources/startup/1496x2048.png'
},


launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();


// Initialize the main view
Ext.Viewport.add(Ext.create('KSDSSENCHA.view.Main'));
},


onUpdated: function() {
Ext.Msg.confirm(
"Application Update",
"This application has just successfully been updated to the latest version. Reload now?",
function(buttonId) {
if (buttonId === 'yes') {
window.location.reload();
}
}
);
}
});

This is my full application. I have just started with Sencha Touch 2.0 and probably I have several mistakes, I'm sorry.
I want to make a small tracking of a route and I can't make it go, with the buttons of the second view "Localizacion.js". First of all I want to click on the first button "Start Track" and make a marker in my position and update it every few seconds with a new marker, but leaving the marker I did before and joining both markers with a line (as a route).
The second thing I want to to is with the second button "Mark", when I click on this button I want to insert a marker in a point (just one).
The third thing I want to do is with the third button "Actual Position", when I click on this button I want to update to my actual position.
This is all I want to do in my starting small application.
I just wanted to know how to put a marker in the google map just by clicking a button. As I've been trying to put in the "Mark" button on the controller Main.js. Resuming...
The question: ¿How to put a marker on a google map definde place by clicking on a button?

It would be great if I had an answer, Thanks.