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

将列defs更改为单击单元格的格式，我认为这对您的情况有用：

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

Ext Js 4 MVC在网格面板中为图像添加监听器

2 个答案: