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

Question

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

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

});

Answer 1

将您的列定义更改为单击单元格的这种格式，我认为这将适用于您的情况：

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

Answer 2

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

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