Sencha Touch 2: get dynamic url corresponding to clicked element in a list

Question

I am trying to dynamically retrieve the url after clicking on an item in a list. The objective is to open the html page corresponding to clicked element.

Here is the code used:

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

    requires: ['Ext.Ajax'],

    config: {
        listeners: {
            activate: 'onActivate'
        },        

        url: 'MyHtml.html' // Work fine if statically
        url: '{link}', // But this doesn't work dynamically 

        tpl:'<h1>{link}</h1>' // However the desired data is displayed right here
    },

    onActivate: function(me, container) {
        Ext.Ajax.request({
            url: this.getUrl(),

            method: "GET",
            success: function(response, request) {
                me.setHtml(response.responseText);
            },
            failure: function(response, request) {
                me.setHtml("failed -- response: " + response.responseText);
            }
        });
    } 

Do you have an idea? Thanks in advance for your help.

Answer 1

{link} works in tpl because the tpl property handles the string like an XTemplate. Your (custom) url property is just handled like a string.

Where exactly is {link} coming from? Since you are using a standard panel, I can only assume you are setting the data property on the panel with this link value. If so, just set the url at the same time via setUrl. Otherwise add a listener on updatedata, so that whenever your template data changes the listener is called and you can update the url.