PDA

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



kdtipa
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?

joel.watson
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!

Thanks
Joel

kdtipa
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.

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

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

http://skirtlesden.com/articles/html-and-extjs-components

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

kdtipa
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.