How to Display an Image/Link Inside an Ext JS GridPanel’s Cell
This tutorial will walk through how you can display an image/link inside an Ext GridPanel cell using a renderer function.
To explain this approach, I will use a sample GridPanel that displays some dummy contact information (name, phone, birthday and email). Together with email data, we will display a link (mailto) and an email link icon/image.
How to do it
First, we need some data to work with. An ArrayStore with a few dummy records:
//array with data - dummy data
var myData = [
['Meyers, Quyn R.', '(943) 570-5141', 'Proin@nullamagna.ca', '05/13/1990'],
['Whitney, Tad T.', '(547) 743-0343', 'vulputate@acurnaUt.org', '05/10/1987'],
['Lawrence, Flavia J.', '(404) 826-4553', 'dapibus.id@accumsan.ca', '01/05/1988'],
['Morales, Susan I.', '(276) 707-8084', 'tristique@seacmetus.com','03/09/1992'],
['Merrill, Desiree Q.', '(911) 546-0559', 'dictum.cursus@vel.ca', '01/07/1981'],
['Hampton, Willa Y.', '(729) 562-8303', 'nascetur@stellus.ca', '06/17/1991'],
['Brewer, Brynne F.', '(818) 302-4393', 'ligula@ullamcorper.org', '04/20/1989'],
['Marsh, Drew D.', '(645) 671-2779', 'et.euismod.et@eget.ca', '02/13/1990']
];
GirdPanel definition:
// create grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header: 'NAME', width: 170, sortable: true, dataIndex: 'name'},
{header: 'PHONE #', width: 150, sortable: true, dataIndex: 'phone'},
{header: 'BIRTHDAY', width: 100, sortable: true, dataIndex: 'birthday',
renderer: Ext.util.Format.dateRenderer('d/m/Y')},
{header: 'EMAIL', width: 160, sortable: true, dataIndex: 'email',
renderer: renderIcon }
],
title: 'My Contacts',
autoHeight:true,
width:600,
renderTo: document.body,
frame:true
});
How it works
{header: 'EMAIL', width: 160, sortable: true, dataIndex: 'email', renderer: renderIcon }
The insteresting part in the above code is the trend column’s mail. A renderer function is an interceptor method that can change the grid cell before it is rendered.
//image path
var IMG_EMAIL = '/gridcell-with-image/img/email_link.png';
//renderer function
function renderIcon(val) {
return '<a href="mailto:' + val + '">'+ '<img src="' + IMG_EMAIL + '"> ' + val +'</a>';
}
Inside the renderer function we just put some HTML code to display what we want. Pretty easy!
Now you can create your own renderer functions!
Happy coding!
Download (J2EE project): 
http://github.com/loiane/gridcell-with-image
Portuguese: http://www.loiane.com/2010/01/extjs-como-colocar-icone-e-link-nas-celulas-do-grid/
Comments (16)
Links to this Post
- ExtJS: Como colocar Ícone e Link nas Células do GRID | Loiane Groner | January 11, 2010
- extjstutorial.org | May 7, 2011
- JavaPins | January 8, 2012
Thanks a boodle. Exactly the task I was going to tackle today. There is nothing like good sample code to speed one’s progress!
awesome i like this
nicely done, thanks
Thanx, it was really simple.
A very useful post.
It has really helped me solve my issue.
Thanks & keep posting.
Hey there, first of all, I would like to say it’s a good website you have got here. However, I haven’t find out the way to add your web-site rss in my rss subscriber, where is the link to your RSS? Thank you
Nice dude – this is exactly what I was looking to do. Sample code rocks.
Hi Guys,
Its very nice. I’ve some additional requirement here. I want to display the links for the all the files located at particular location and if user clicks on particular link that particular file should get open. Can anybody help me to suggest easiest way to do it ? There might be some thing to do as server side coding.
Thanks
That example is really good.
Thanks very much is just what I needed, ‘cuz I was returning at renderer function something like this ” and the browser send me back a forbidden exception.
Thanks, it is very useful.
Nice one. Thanks for this.
Thanks.. Good one helped a lot
Very great post. I simply stumbled upon your blog and wanted to mention that I’ve really enjoyed surfing around your blog posts. In any case I’ll be subscribing on your feed and I’m hoping you write again very soon!