Get Rally app inside of html hyperlink

Question

I'm currently writing an app that has some custom html happening inside some grid renderers. The code I am using works when running the app externally or in a custom HTML app, but does not work inside a Rally Panel - after running migrations and all. Here is the small bit of code that is relevant:

this.add({
    xtype: 'rallygrid',
    ...
    columnCfgs: [
        {...},
        {text: 'Task Details', renderer: function(value, metaData, record, rowIndex) {
            if (record.displayLink) {
                return '<a href="#" onclick="Rally.getApp()._showTasks(\'' +
                    rowIndex + '\'); return false;">Show Tasks</a>';
            }
            return '';
        }}
    ]
});

The interesting part of this chunk of code is this:

'onclick="Rally.getApp()._showTasks(\'' + rowIndex + '\');"'

Which, again, works externally & inside a custom HTML app. The Rally.getApp() part is necessary so I can get the app's functions, such as _showTasks(). When inside Rally and the link is clicked, an error is thown saying TypeError: Object #<Object> has no method 'getApp' even though I know it should.

Answer 1

I never figured out why Rally's getApp() method disappeared, but I did find a solution to my headache!

Instead of using the html hyperlink to get to my function, I used a listener on the column like this:

this.add({
    xtype: 'rallygrid',
    ...
    columnCfgs: [
        {...},
        {text: 'Task Details', renderer: function(value, metaData, record, rowIndex) {
            if (record.displayLink) {
                return '<a href="#" class="link" id="' + rowIndex + 
                    '" onclick="return false;">Show Tasks</a>';
            }
            return '';
        },
        listeners: {
            click: function(me, td, cellIndex, record, element) {
                if (element.target.className === "link") {
                    this._showTasks(parseInt(element.target.id, 10));
                }
            },
            scope: this
        }}
    ]
});

After the listener I just searched for the class name I added to the a tag and passed the rowIndex through the element's id and everything worked out!

Answer 2

Another trick that a lot of people use is to do something like this:

launch: function() {
    App = this;
    ...
}

...
// somewhere else in the app
    App._showTasks();

I am not sure if this will work in your case, since you are trying to put it into an onclick listener, but this strategy could be helpful.