javascript - Extjs 函数未找到问题

Question

我编写了一个简单的 ExtJS 网格，其中包含一个 renderer 列，该列返回一个 HTML 超链接，供 onclick 调用简单的 JavaScript 函数。

不幸的是，当我单击它时，它在浏览器控制台中显示函数未定义。感谢任何帮助。

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属性。请参阅此文档 here .

如果需要使用链接(标签 a)，我建议使用模板列，您可以在其中使用 HTML 标记和其他资源创建您喜欢的模板。请参阅此文档 here 。

看看这个 fork 的 fiddle来自Akrion 。有一个网格包含“操作列”，另一个网格包含“模板列”。

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