[removed] undefined is not a function

Question

This is my code for my controller:

Ext.define(controller.details.StudentControlller', {
    extend: 'Ext.app.Controller',
    requires: [
    ],
    config: {
},
Init: function(){
"use strict";
        var me = this;
        this.app = this.getApplication();
    this.createStudentTables();
}
createStudentTables: function () {
var finalStudent=[],
view=this.getStudentsTableView();

arrReqTplTest = ['<div class="StuReq"><table><tr><th class=" StuReq ">' +
                'NAME  ' +
                '<img src="resources/images/arrow-bottom-1-512.png" width="10px" height="10px" onclick="this.sortStore();"/>' +
                '</th><th class=" StuReq ">CATEGORY ' +
                ' <img src="resources/images/arrow-bottom-1-512.png" width="10px" height="10px" onclick="sortStore();"/>' +
                '</th><th class=" StuReq ">STUDENT GROUP  ' +
                '<img src="resources/images/arrow-bottom-1-512.png" width="10px" height="10px" onclick="sortStore();"/>' +                
</th></tr></table></div>'];
finalStudent.push({
title: “Student Table”,
                collapsed: true,
                layout: 'fit',
                items: [
                    {
                        xtype: 'component',
                        itemId: 'StudentTablViewID-' + i,
                        html: arrReqTplTest

                    },
                    {
                        xtype: 'dataview',
                        itemId: 'StudentTable-' + i,
                        height: 200,
                        store: ‘studentDetailStore’,
                        //itemHeight: 70,
                        scrollable: false,           
                        itemSelector: 'div.wrap-requirements-' + i
                    }
                ]
            });
        }

        view.add(finalStudent);
})
}
sortStore: function(){
        alert("Now it is finally undefined");
    }
});

In the code above you can see that I have written an onclick for images that I have attached next to column headers. When I click on that image it is supposed to call the function called as sortStore but it just keeps throwing the error called "Uncaught TypeError: undefined is not a function"

Please forgive me if I have done some syntax errors, its because I have shortened the code to make it readable. But rest assured everything except sortStore() calling works fine from onclick event works fine.

Answer 1

The problem is that you are binding a listener with a string. This listener will only fire if you have a function sortStore on the global level (window). This listener will never execute in the current scope like you expected it too.

The recommended way is to make an Ext.Img and bind a click listener to it. Or use the xtype: 'image'.

Ext.create('Ext.Img', {
    src: 'resources/images/arrow-bottom-1-512.png',
    listener: {
        click: function(){ ... }
    }
});

Answer 2

Check out this fiddle https://fiddle.sencha.com/#fiddle/536

I created this as a panel and attached a event listener to the img element like this.

Ext.define('test.view.SignupPanel', {
    extend: 'Ext.Panel',
    xtype: 'mypanel',
    config: {
      itemId: 'testItem',
      layout: 'fit',
      html:'<img  src="http://www.sencha.com/img/v2/logo.png"/>',
      listeners:{
        initialize:function(obj){ 
               var me= this;
               obj.element.down('img').on('tap', me.imageTap, this, me);
            }
      }
    },
    imageTap:function(obj){
        Ext.Msg.alert('Hi', this.xtype);
    }

});