View Full Version : Grid with File Download Link?

23 Oct 2011, 7:44 PM

I am currently using grid with row editor plugin to help update rows to my MySQL database. I would like to add this new feature of uploading files to each row. Has anyone done this before? I am thinking maybe adding a button to open a new window to upload attachments like how we normally do on forums, etc?

Also, how do i make the file appear as a link on my grid so that when someone clicks on that link, the file prompts you a download window?

Any suggestions will be great!

23 Oct 2011, 8:44 PM
Define a renderer in your column model, and then build the link in that render-function.


Ext.define('BII.view.reports.DocumentGrid', {
extend: 'Ext.grid.Panel',
alias: 'widget.documentGrid',

initComponent: function () {
var conf = {
title: 'Files',
store: 'Documents',
forceFit: true
Ext.apply(this, conf);
this.columns = this.buildColumns();

buildColumns: function () {
return [
header: 'Type',
dataIndex: 'extension',
renderer: this.renderExtension,
width: 20
header: 'File',
dataIndex: 'filename',
flex: 1
header: 'last Change',
dataIndex: 'lastChange',
width: 120
header: 'Size',
dataIndex: 'filesize',
align: 'right',
renderer: Ext.util.Format.fileSize,
width: 100

renderExtension: function (val, obj, record) {
return '<a href="data/mod/berichte/getDocument?data=' + record.data.fullpath + '" target="_blank" /><img src="/resources/icons/fatcow/16/page_white_' + val + '.png" /></a>';

23 Oct 2011, 11:47 PM
Thanks for the code. Does this work even if i store the file in my database as blob data type?

24 Oct 2011, 1:11 AM
Hi, it is all a matter of your backend.

You can link to a URL of your choice, so if you link to a URL which extracts the file from DB and then sends the data via Header information you will be able to get your file from DB ....

In my example I do exactly the same (I'm reading my file from disk and then send the data via PHP-script to the browser).

PS: please mark this thread as answered

24 Oct 2011, 2:19 AM

Yes, you are right! One last thing, is there any file upload tool i can use? So i can put it as part of my form to upload files to my database before clicking on save button to do that? Thanks

24 Oct 2011, 2:28 AM
What do you mean by tool? There is an example in the examples folder for a file upload via ExtJS (including nice styling of form element) which opens the regular file upload dialogue.

But the file will only be transferred AFTER you click the upload button.

There might be flash uploader which will upload your files in a more convenient way but I don't know of any for ExtJS.

24 Oct 2011, 2:32 AM
I might have cause some confusion. By tool i meant plugin like the roweditor, etc. But i will take a look at the example, i didn't notice it was there until you mentioned it. Thanks again.