Problems with Sencha Touch variable access

Question

I'm quite new to using Sencha Touch. I'm creating an app that has a sidebar and a map pane and when the user clicks on the Show Map button in the sidebar area the map is supposed to center on that location. Where I'm having an issue is that I'm unsure of how to access the {lat} and {lon} properties that are in the tpl variable from the handler function. My apologies if this is a trivial question, but it has me stumped.

Ext.define('Admin.view.Details',
{
extend: 'Ext.Panel',
xtype: 'details',

config:
{
    styleHtmlContent: true,
    scrollable: 'vertical',
    title: 'Individual',
    tpl:
    [
        'Account Number: {comid}',
        '<br />',
        'Address: ',
        '{address} <br />',
        '{lat},{lon}',
    ],

    items:
    [
        {
            title: 'Utilities',
            items:
            [
                {
                    xtype: 'selectfield',
                    label: 'Utility Type',
                    options: 
                    [
                        {text: 'Electricity', value: 'U1'},
                        {text: 'Water', value: 'U2'},
                        {text: 'Gas', value: 'u3' },
                    ],

                    id: 'utilityType',
                },
                {
                    xtype: 'selectfield',
                    label: 'Coverage Area',
                    options: 
                    [
                        {text: 'Subdivision', value: 'a1'},
                        {text: 'Zipcode', value: 'a2'},
                        {text: 'County', value: 'a3' },
                    ],

                    id: 'areaType',
                },
                {
                    xtype: 'button',
                    text: 'Show Map',
                    ui: 'round',
                    padding:3,
                    margin:10,
                    id:  'mapsBTN',
                    handler: function() {

                        olMap.setCenter(new OpenLayers.LonLat(lon, lat).transform
                        (
                            new OpenLayers.Projection("EPSG:4326"),
                            olMap.getProjectionObject()
                        ), 16);

                    }
                },
            ]
        },
    ]
}
});

Are you using MVC paradigm ? If so then why do you use a handler ? You could add a reference to your button in the view's controller and listen to the itemtap event there. — Titouan de Bailleul

Titouan de Bailleul Titouan de Bailleul · Accepted Answer · 2012-11-10T21:21:18

You need to either implement de handler in your view's controller by adding references to your view and your button and then add a listener for the itemtap event of the button OR implement it in the constructor method of the view :

Ext.define('Admin.view.Details',{
  extend: 'Ext.Panel',
  xtype: 'details',

  config:{
    ...
  },

  constructor: function() {
    this.callParent(arguments);

    var me = this;

    this.child('#mapsBTN').setHandler(function() {
      me.getTpl(); // Here's your tpl config object
    });
  }
});

Hope this helped

Problems with Sencha Touch variable access

2 Answers