Extjs Function Not Found Issue

Question

I have written a simple ExtJS grid with a column renderer that returns an HTML hyperlink for an onclick to call a simple JavaScript function.

Unfortunately, when I click it shows function undefined in the browser console. Any Help is Appreciated.

function myALert() {
    alert("yo");
}

function columnRenderer(val) {
    return '<a href="JavaScript:void(0);" onclick="myALert()">View</a>'
}
Ext.create('Ext.data.Store', {
    storeId: 'simpsonsStore',
    fields: ['name', 'email', 'phone'],
    data: [{
        name: 'Lisa',
        email: 'lisa@simpsons.com',
        phone: '555-111-1224'
    }, {
        name: 'Bart',
        email: 'bart@simpsons.com',
        phone: '555-222-1234'
    }, {
        name: 'Homer',
        email: 'homer@simpsons.com',
        phone: '555-222-1244'
    }, {
        name: 'Marge',
        email: 'marge@simpsons.com',
        phone: '555-222-1254'
    }]
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [{
        text: 'Name',
        dataIndex: 'name'
    }, {
        text: 'Email',
        dataIndex: 'email',
        flex: 1
    }, {
        text: 'Phone',
        dataIndex: 'phone',
        renderer: columnRenderer
    }],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

Answer 1

The use of global functions in this case where it will be used in only one column is not recommended.

I suggest using Action Column, which has the handler property that performs a function on the click. See this documentation here.

If it is necessary to use a link (tag a), I suggest using Template Column, where you can create the template you prefer using HTML markup and other resources. See this documentation here.

Take a look in this forked fiddle from Akrion. There is one grid with Action Column and another with Template Column.

Ext.application({
    name: 'Fiddle',
    launch: function () {
        Ext.create('Ext.data.Store', {
            storeId: 'simpsonsStore',
            fields: ['name', 'email', 'phone'],
            data: [{
                name: 'Lisa',
                email: 'lisa@simpsons.com',
                phone: '555-111-1224'
            }, {
                name: 'Bart',
                email: 'bart@simpsons.com',
                phone: '555-222-1234'
            }, {
                name: 'Homer',
                email: 'homer@simpsons.com',
                phone: '555-222-1244'
            }, {
                name: 'Marge',
                email: 'marge@simpsons.com',
                phone: '555-222-1254'
            }]
        });

        Ext.create('Ext.grid.Panel', {
            title: 'Simpsons (Grid with Action Column)',
            store: Ext.data.StoreManager.lookup('simpsonsStore'),
            columns: [{
                text: 'Name',
                dataIndex: 'name'
            }, {
                text: 'Email',
                dataIndex: 'email',
                flex: 1
            }, {
                xtype: 'actioncolumn',
                text: 'Phone',
                dataIndex: 'phone',
                align: 'center',
                icon: 'https://cdn2.iconfinder.com/data/icons/ledicons/eye.png',
                getTip: function(value) {
                    return value;
                },
                handler: function(grid, rowIndex, colIndex, item, e, record) {
                    alert("Yo! " + record.get('phone'));
                }
            }],
            height: 200,
            width: 400,
            renderTo: Ext.getBody()
        });

        Ext.create('Ext.grid.Panel', {
            title: 'Simpsons (Grid with Template Column)',
            store: Ext.data.StoreManager.lookup('simpsonsStore'),
            columns: [{
                text: 'Name',
                dataIndex: 'name'
            }, {
                text: 'Email',
                dataIndex: 'email',
                flex: 1
            }, {
                xtype: 'templatecolumn',
                text: 'Phone',
                dataIndex: 'phone',
                align: 'center',
                tpl: new Ext.XTemplate(
                    '<a href="{[this.myAlert(values)]}">{phone}</a>',
                    {
                        myAlert: function(values){
                           return "javascript:alert('Yo! "+values.phone+"')";
                        }
                    }
                )
            }],
            height: 200,
            width: 400,
            renderTo: Ext.getBody()
        });
    }
});