PDA

View Full Version : Ext Js 4 MVC - Add Listener to Image in a grid panel



TrevorD
15 Jan 2013, 6:52 PM
I was wondering how to add a listener to an image that is displaying in a grid panel. I am not sure how to implement the click event on an image from the renderer function of a column. I would like to add an onclick event to the images. Should that be done in this view or the controller? I am a newbie and a little lost. 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);
}
});

mitchellsimoens
17 Jan 2013, 9:08 AM
Why not use an action column instead?

Tuminh112
29 Jan 2013, 6:24 AM
I have the same question but instead of a grid I have an image map with several links in my View. Should the listeners be in the View or Controller?