View Full Version : Grid with embedded form for telephone directory

7 Mar 2008, 9:38 AM
Hi All,

I am building a telephone directory for our internal intranet using a grid with an embed form.
The data is held on a ldap store, including the user picture. I am attempting to show the user picture in the form. I can generate the url to the image and store in the the data array, but cannot show the image in the form. Only the textual link. Anyone know how I can approach this. I am using the /examples/form/form-grid.html example.
See attached screenshot.

7 Mar 2008, 9:55 AM
The simplest way to add a picture to your grid would be to implement a JavaScript function as a renderer and add that renderer function to your grid. I just took a quick code at your code and I would just add this line below to your column model

{header: "Image", width:xx, dataIndex: 'govImage', renderer: pictureRenderer}

The pictureRenderer function is here. Change height, width, etc.. as appropriate.

function pictureRenderer(val) {
if (val.length > 0) {
return '<img src="' + val + '" width="xx" height="xx">';
return val;

7 Mar 2008, 9:57 AM
I believe he wants to show the picture in the form area, not the grid ;)
One of the Ext 1 form examples used to show an example of that behavior, but I am surprised to see that missing in the Ext 2 form examples...

7 Mar 2008, 11:21 AM
Thanks for the comments, yes I really wanted the picture to show up in the form area, not the grid. I tried to use the Ext.ux.CustomContentField from this user [email protected], which does allow an image in the form field but I couldn't tie it to the image in my data store.

7 Mar 2008, 7:53 PM
Oops. Sorry - didn't read completely. :) So you want to embed an image in the Form panel? I haven't tried it yet but there is the MediaPanel ux - http://extjs.com/forum/showthread.php?t=23983. From the description, it sounds like something that will do the trick.

8 Mar 2008, 2:53 AM
This can be done with Ext.ux.MiscField:

MiscField for Ext 1.1 (http://extjs.com/forum/showthread.php?t=6930)
MiscField fix for Ext 2.0 (http://extjs.com/forum/showthread.php?t=13227)