The map is the other big chunk of functionality that's currently missing. When you create a new to-do item, you should have the option to select a point on the map. When you near this point, your phone will remind you of the related item on your to-do list.
As with the image selector, we'll create a custom map component to replace the temporary fieldset that we created when we were mocking the views. Create a new file in todo-app/app/view/ named Map.js and give it the basic component structure:
Ext.define('TodoApp.view.Map', {
extend: 'Ext.form.FieldSet',
alias: 'widget.todo-map',
requires: [
'Ext.Map'
]
});Sencha Touch provides a map component, which wraps the Google map API. We require the Ext.Map class here but we also need to include the JavaScript that is backing this API. Add the following element to the js array in todo-app/app.json:
{
"path": "http://maps.google.com/maps/api/js?sensor=true"
}Now, back in Map.js...