Extjs Ext Js 4 MVC将侦听器添加到网格面板中的图像

我想在网格面板中显示一个图像，并在用户单击图像时触发单击事件。我在显示图像时没有问题。我的问题是我不知道如何将侦听器添加到图像中。如有任何帮助，将不胜感激？真的不知道下一步该怎么办。谢谢

Ext.define('MyApp.view.people.List' ,{
extend: 'Ext.grid.Panel',
alias: 'widget.myList',
requires: [
    'MyApp.util.Globals',
    'MyApp.util.ImageTmpl'
],

id: 'myGrid',

title: 'All People',

initComponent: function() {

    var imagesUrl =/'+MyApp.util.Globals.projectName+'/'+MyApp.util.Globals.imageFolder;


    this.store = {
        fields: ['name', 'email'],
        data  : [
            {name: 'Ed',    email: 'ed@sencha.com', myVal: 1},
            {name: 'Tommy', email: 'tommy@sencha.com',myVal: 2}
        ]
    };

    this.columns = [
        {header: 'Name',  dataIndex: 'name',  flex: 1},
        {header: 'Email', dataIndex: 'email', flex: 1},
        {header: '', dataIndex: 'myVal',
            renderer: function() {
                return Ext.String.format('<img src="'+imagesUrl+'/edit.png" />');
            }
        },
        {header: '', dataIndex: 'myVal',
            renderer: function() {
                return '<img src="'+imagesUrl+'/book.png" alt="Lesson Study"/>';
            }
        },
        {header: '', dataIndex: 'myVal',
            renderer: function(){

                var imageTmpl = Ext.create('MyApp.util.ImageTmpl');

                console.log(imageTmpl);

                return imageTmpl;
            }
        }
    ];

    this.callParent(arguments);
}

Ext.define（'MyApp.view.people.List'{
扩展：“Ext.grid.Panel”，
别名：“widget.myList”，
要求：[
'MyApp.util.Globals'，
'MyApp.util.ImageTmpl'
],
id:'myGrid'，
标题:"全体人民",，
initComponent:function（）{
var imagesUrl=/'+MyApp.util.Globals.projectName+'/'+MyApp.util.Globals.imageFolder；
此存储={
字段：['name'，'email']，
数据：[
{姓名：'Ed'，电子邮件：'ed@sencha.com，myVal:1}，
{姓名：'汤米'，电子邮件：'tommy@sencha.com'，myVal:2}
]
};
此值为。列=[
{header:'Name'，dataIndex:'Name'，flex:1}，
{header:'Email'，dataIndex:'Email'，flex:1}，
{标头：“”，数据索引：'myVal'，
渲染器：函数（）{
返回Ext.String.format（“”）；
}
},
{标头：“”，数据索引：'myVal'，
渲染器：函数（）{
返回“”；
}
},
{标头：“”，数据索引：'myVal'，
渲染器：函数（）{
var imageTmpl=Ext.create（'MyApp.util.imageTmpl'）；
console.log（imageTmpl）；
返回图像tmpl；
}
}
];
this.callParent（参数）；
}

---

}))

将列def更改为单击单元格的格式，我认为这种格式适合您的情况：

{
    header: '', dataIndex: 'myVal',
    renderer: function() {
        return Ext.String.format('<img src="'+imagesUrl+'/edit.png" />');
    },
    listeners: {
        click: function(){
            //action of the image here
        }
    }
}

{
标头：“”，数据索引：'myVal'，
渲染器：函数（）{
返回Ext.String.format（“”）；
},
听众：{
单击：函数（）{
//图像在这里的作用
}
}
}

我还没有测试过这段代码，按照这些思路应该可以工作：

Ext.define('app.controller.myController', {
    extend: 'Ext.app.Controller',

    init: function() {
        this.control({
            'people.List': {
               afterrender: function( aCmp ){
                    var me = this; 
                    var iImages = aCmp.getEl().select('img'); 

                    iImages.on('click', function( aEvent, aElement ){
                        me.onImageClick( aElement );
                    });

                }
            }   
        });
    },

    onImageClick: function( aElement ) {
        console.log('Image Clicked');
    }   
});

---

如果你想点击图片，你必须给它和id，然后勾上它。作为组件上的控制器

control

methodhook，它并不完全是MVC，而不是html元素。或者你可以在你的网格中挂接单元格点击事件，但不确定这是你想要的吗？我想点击图片，让图片执行一些功能。例如：单击“删除图像”并运行restful delete单击“编辑”并打开带有“编辑”弹出窗口的表单窗口。感谢Izhaki的回复，但当我尝试此操作时，它不起作用。顺便说一句，您的代码应该是：iImages.on（'click'，function（aEvent，aElement）{me.onImageClick（aElement）；}）；}）谢谢你，雷米乌斯。这很有效。它为整个专栏添加了一个监听器，但这很适合我的需要。如果您需要在同一列中的多个图像上使用单击功能，我想这个解决方案将不起作用。有一些方法可以使它依赖于列中的行和图像，但我不会讨论如何做到这一点，因为它有点复杂。如果你需要的话，再问一个问题，我会和你一起解决。