Функция Extjs не найдена

Question

Я написал простую сетку ExtJS со столбцом renderer, которая возвращает гиперссылку HTML для onclick для вызова простой функции JavaScript.

К сожалению, когда я нажимаю, в консоли браузера отображается функция undefined.Любая помощь приветствуется.

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

Использование глобальных функций в этом случае, когда они будут использоваться только в одном столбце, не рекомендуется.

Я предлагаю использовать Action Column, у которого есть свойство handler, которое выполняет функцию нанажмите кнопку.См. Эту документацию здесь .

Если необходимо использовать ссылку (тег a), я предлагаю использовать Template Column, где вы можете создать шаблон, который вы предпочитаете, используя разметку HTML и другие.Ресурсы.См. Эту документацию здесь .

Взгляните на эту раздвоенную скрипку от Акрион .Существует одна сетка с колонкой действий, а другая с колонкой шаблонов.

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()
        });
    }
});