ItemTpl onclick function call extjs 6

Question

how do i call a onclick function on dataview,

itemTpl: [
'<a onClick="this.getViewController().somefunction({id},{code});" href="#">{code}</a><br/>',
]

and in viewController

somefunction: function(){
// some logic
}

gives the error of

this.getViewController() is not a function

NOTE: that i don't wan't to do MyApp.app.getController() because i have many ViewControllers and i cannot put all my logic to a centeral contoller

Answer 1

If you really want to bind a click function in itemTpl, you need to specify functions accessible in the template like this:

// Save 'this' scope to me variable for use in XTemplate scope
var me = this;

// ...

itemTpl: [
    '<a onClick="this.someFunction();" href="#">{code}</a><br/>',
    // Defining funtions accessible in the XTemplate
    {
        someFunction: function() {
            // Use 'me' here, because 'this' is XTemplate
            me.getViewController().someFunction();
        }
    }
]

But if at all possible, I would use click listener on the item instead, like so:

// Save 'this' scope to me variable for use in the item scope
var me = this;

// ...

itemConfig: {
    listeners: {
        click: function() {
            // Use 'me' here, because 'this' is the item
            me.getViewController().someFunction();
        }
    }
}

I usually work in ExtJS 4 and got this just from the ExtJS 6 documentation, so please excuse any mistakes I made and correct me, so that I can edit the answer.