Ext Js 4 MVC Add Listener to Image in Grid Panel

2
votes

I would like to display an image in a grid panel and fire a click event when the user clicks on the image. I don't have a problem displaying an image. The problem I have is I am not sure how to add the listener to the image. Any help would be greatly appreciated? Really unsure what to do next. Thanks.

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: '[email protected]', myVal: 1},
            {name: 'Tommy', email: '[email protected]',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);
}

});

2
extjsextjs4.1
If you want click on the image you'll have to give it and id and hook on that. It's not exactly MVC as a controller control method hook on components, not html elements. Alternatively you can hook on cell click event in your grid, but not sure this is what you after? – Izhaki
I would like to click on the image and have the image perform some function. For example: click on delete image and run restful delete click on edit and have form window with edit pop up. – Trevor

2 Answers

0
votes

Change your column defs to this format that does a click on the cell, which I think will work for you situation:

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

I haven't tested this code, bus something along these lines should work:

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