Itemtap and listening Event function Sencha Touch 2 List

Question

Hi all am finding it difficult to set set a call back function, i have a list and in my controller, am trying to listen to each of the items in the list so that once each item is being taped, it will display a map with a marker pointing at the specified lat and log specified in my store for that particular item. i was thinking an itemtap even will be the best for this, but i don't know how to set it up in my controller.

This my store:

Ext.define('List.store.Presidents', {
extend : 'Ext.data.Store',

config : {
    model : 'List.model.President',
    sorters : 'lastName',
    storeId: 'contactmap',
    grouper : function(record) {
        return record.get('lastName')[0];
    },

    data : [{
        firstName : "Ikhlas HQ",
        lastName : "Tower 11A, Avenue 5, Bangsar South, No.8 Jalan Kerinchi 59200 Kuala Lumpur",
        lat : 3.110649,
        lng : 101.664991,
        id: '200',
    },
    {
        firstName : "PEJABAT WILAYAH SELANGOR",
        lastName : "No. 97, 97-1 & 97-2, Jalan Mahogani 5/KS7, Ambang Botanic, 41200 Klang, Selangor",
        lat : 3.003384,
        log : 101.45256,
        id: '001',
    },]}
});

This my Controller:

Ext.define('List.controller.Main', {
extend: 'Ext.app.Controller',
config: {
    refs: {
        main: 'mainpanel',
      },
    control: {
        'presidentlist': {
            disclose: 'showDetail'
        },
     } },
showDetail: function(list, record) {
            this.getMain().push({
                xtype: 'presidentdetail',
                title: record.fullName(),
                data: record.getData(),
listeners: {
    itemtap : function(component, map, geo, eOpts) {
                     var contactmap = Ext.getStore('contactmap'); 

                contactmap.load({ 
                    callback:function(records,map,componet,lad,log){
                        var position = new google.maps.LatLng(); 
                 }
                 var marker = new google.maps.Marker({
                    position: position,
                    map: map
                        });

                var infowindow = new google.maps.InfoWindow({
                    content: 'Working Fine'
                        });

            google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(map, marker);
                        });
                });

                },
              }, 
        })
     },
});

Hope i can get some help here to proceed am stuck at this point. thanks

Answer 1

Ext.define('List.controller.Main', {
extend: 'Ext.app.Controller',
config: {
    refs: {
        myList: 'presidentlist', // 'presidentlist' is xtype of your list
      },
    control: {
        myList: {
            itemtap: 'onMyListItemTap'
        },
     }
},
onMyListItemTap: function(list, index, target, record, e, eOpts) {
  // some functionality here
  var myLat = record.data.lat;  // etc.
  var myLng = record.data.lng;  // etc.
}

Answer 2

My Controller:

Ext.define('List.controller.Main', {
extend: 'Ext.app.Controller',
config: {
refs: {
    main: 'mainpanel',
  },
control: {
    myList: {
        itemtap: 'onMyListItemTap'
    },
    'presidentlist': {
            disclose: 'showDetail'
        },
 }
},
showDetail: function(list, record) {
            this.getMain().push({
                xtype: 'presidentdetail',
                title: record.fullName(),

onMyListItemTap: function(list, index, target, record, e, eOpts) {
    var position = new google.maps.LatLng();

    var myLat = record.data.lat;  
    var myLng = record.data.lng;

    var marker = new google.maps.Marker({
                    position: position,
                    map: map
                        });

google.maps.event.addListener(marker, 'click', function() {
                    infowindow.open(map, marker);
                        });

                    setTimeout(function() {
                    map.panTo(position);
                        }, 1000);
},
});
 },
});

My Store:

Ext.define('List.store.Presidents', {
extend : 'Ext.data.Store',

config : {
    model : 'List.model.President',
    sorters : 'lastName',
    storeId: 'contactmap',
    grouper : function(record) {
        return record.get('lastName')[0];
    },

    data : [{
        firstName : "Ikhlas HQ",
        lastName : "Tower 11A, Avenue 5, Bangsar South, No.8 Jalan Kerinchi 59200 Kuala Lumpur",
        lat : 3.110649,
        log : 101.664991,
        id: '200',
    },
    {
        firstName : "PEJABAT WILAYAH SELANGOR",
        lastName : "No. 97, 97-1 & 97-2, Jalan Mahogani 5/KS7, Ambang Botanic, 41200 Klang, Selangor",
        lat : 3.003384,
        log : 101.45256,
        id: '001',
    }, {
        firstName : "PEJABAT WILAYAH KEDAH",
        lastName : "57, Jalan Lagenda 3, Legenda Heights, 08000, Sungai Petani, Kedah Darul Aman",
        lat : 5.657754,
        log : 100.50014,
        id: '002',
    },] 
},
});

My Model:

Ext.define('List.model.President', {
extend : 'Ext.data.Model',
config : {
    store: 'Presidents',
    fields : ['firstName', 'middleInitial', 'lastName', 'lat', 'log', 'id']
},
fullName : function() {
    var d = this.data, names = [d.firstName, (!d.middleInitial ? "" : d.middleInitial + "."), d.id];
    return names.join(" ");
}
});