View Full Version : Passing a string file path from a store to an image hyperlink in the view

29 Jan 2015, 6:14 AM
Hello all,

I'm new to ExtJS, and this is my first time posting on the forum. I was unable to find an answer to my question, so I apologize if this has already been answered somewhere.

The project I'm working on calls for a purely display page loaded with information from a database query to have a hyperlink to an attachment on the display. The filename and location come along with the database info. For other fields on the page, we're using the xtype "displayfield", and it nicely gives us a label with a colon, and a text value. It even allows us to apply different styles to the label and value. Here's an example of one of those...

items: [
xtype: 'displayfield',
cls: 'CRP_DisplayLabelCell',
fieldLabel: 'AD Reference #:',
itemId: 'ReferenceNum',
fieldCls: 'CRP_DisplayDataCell_Emphasis',
flex: 4

But the label for this attachment link is supposed to be an image, and the hyperlink itself is supposed to be an image. I'm able to sort of cheat and show the image by setting the "html" property of a box, like...

xtype: 'box',
itemId: 'DocPath',
html: "<img border=\"0\" src=\"../Common/images/PaperClip.png\" />: <a href=\"PUBLICATIONDOCUMENTS/WORKCARDREPORT-28-JUL-2014-14-51-39.PDF\" target=\"_new\"><img border=\"0\" src=\"../Common/images/LogoIconAdobe.png\" /></a>",
flex: 2

... but the problem is that the file location is hard coded.

What is the correct way to accomplish what I'm trying to do with ExtJS?

30 Jan 2015, 9:44 PM
Hi kdtipa--

I would encourage you to use the "image" component. It allows you to specify a "src" config, as well as a number of other configs useful for images (height, width, etc). The API also provides a handy setSrc() method, which you can use to change the src dynamically.

Here is the documentation for Ext.Img: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.Img

I hope that helps!


23 Feb 2015, 2:08 PM
setting the src of the image isn't what I'm looking to do. To do it in normal HTML, it might look something like...

<a href="docs/doc_name.pdf"><image src="images/DocIcon.png" /></a>

And the "href" in the link needs to be set from data in the data store.

28 Feb 2015, 2:20 AM
'Ext.XTemplate' will help you.

28 Feb 2015, 5:29 PM
You may find this helpful:


It explains some of the techniques available for creating your own HTML markup with an ExtJS component.

2 Mar 2015, 5:45 AM
Interesting article. I haven't finished reading it yet, but what I've read so far is already helpful. Thank you.