I think this tutorial is easy, and maybe many programmer alredy know how to make it.

Main point of this tutorial is how to get file id in the grid. After that, we call the name of the file that we will to download.

In this section, we use the database from the previous tutorial: Upload file and image using extjs, so here we will try to download a file that was saved in the previous tutorial: upload file and image using extjs

Below is the screen shot of this tutorial:

To create this tutorial, several files that need is as follows:

1. create html file to call javascipt and css files

<script src="ext-2.2/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="ext-2.2/ext-all.js" type="text/javascript"></script>
<script src="show.js" type="text/javascript"></script>
<!-- .download { background: url('download.png') no-repeat 0 0 !important; } -->
<table border="0" align="center">
<tbody>
<tr>
<td></td>
</tr>
</tbody></table>

2. create javascipt file to make form download

Ext.onReady(function(){
Ext.QuickTips.init();
var simplestore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy ({
url:'show1.php',
method: 'POST'
}),
reader: new Ext.data.JsonReader ({
root: 'results',
totalProperty: 'total',
id: 'id',
fields: [
'id','Filename','Fileconten','photo','date'
]
}),
sortInfo:{field: 'id', direction: "ASC"}

});

simplestore.load({params:{start:0,limit:6}});

var SimpleColumnModel = new Ext.grid.ColumnModel(
[
{
header: 'ID',
dataIndex: 'id',
width: 50

},
{
header: 'File Name',
dataIndex: 'Filename',
width: 130

},{
header: 'File Conten',
dataIndex: 'Fileconten',
width: 250,
renderer: function(value, cell){
cell.css = "cell";
return value;
}

},
{
header: 'Date',
dataIndex: 'date',
width: 150,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
hidden: false
}]
);
SimpleColumnModel.defaultSortable= true;

var SimpleGrid =  new Ext.grid.EditorGridPanel({
title: 'Simple Grid',
store: simplestore,
cm: SimpleColumnModel,
enableColLock:false,
frame:true,
width:600,
height: 250,
selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
bbar: new Ext.PagingToolbar({
pageSize: 6,
store: simplestore,
displayInfo: true,
displayMsg: 'Displaying data {0} - {1} of {2}',
emptyMsg: "No data to display"
}),

tbar: [{
//this is main point of this section tutorial
text: 'Download',
iconCls:'download',
handler:function(){
var m = SimpleGrid.getSelections();
if(m.length > 0){
location.href = './artikel/'+ m[0].get('Fileconten');

}
else{
Ext.MessageBox.alert('Message', 'Please choose a file that you want');
}
}}
]

});

var myPanel = new Ext.Panel({
autoScroll :true,
renderTo:'download',
items:[
SimpleGrid
]
});

});

3. finally create php file to dasplay data

include "koneksi.php";
include  "JSON.php";

$query = "SELECT * FROM uploadf";
$result = mysql_query($query);
$nbrows = mysql_num_rows($result);
$start = (integer) (isset($_POST['start']) ? $_POST['start'] : $_GET['start']);
$end = (integer) (isset($_POST['limit']) ? $_POST['limit'] : $_GET['limit']);
$limit = $query." limit ".$start.",".$end;
//echo $limit;
$result = mysql_query($limit);

if($nbrows>0)
{
while($rec = mysql_fetch_array($result))    {
$rec['date']=codeDate($rec['date']);
$arr[] = $rec;
}
$jsonresult = JEncode($arr);
echo '({"total":"'.$nbrows.'","results":'.$jsonresult.'})';
}
else
{
echo '({"total":"0", "results":""})';
}

// Encodes a SQL array into a JSON formated string
function JEncode($arr){
if (version_compare(PHP_VERSION,"5.2","<"))
{
require_once("JSON.php"); //if php<5.2 need JSON class
$json = new Services_JSON();//instantiate new json object
$data=$json->encode($arr);  //encode the data in json format
} else
{
$data = json_encode($arr);  //encode the data in json format
}
return $data;
}
function codeDate ($date) {
$tab = explode ("-", $date);
$r = $tab[1]."/".$tab[2]."/".$tab[0];
return $r;
}

?>

Thanks for your attention. Download Soure code

Random articles:

• JavaScript Function Call Profiling (ejohn.org)
• jQuery, Monads, and Functional Programming (windley.com)
• jQuery excellent talks (idojava.blogspot.com)

Related article by another person

Tutorial Extjs: Download File is posted on February 21st, 2009 by faisal. This post is filed under: Tutorial Extjs, Tutorial HTML, Tutorial PHP, JSON, PHP, Programming, SQL, Tutorial .

Incoming search terms for the article:

extjs download filetutorial extjsextjs tutorialextjs file downloadbelajar extjsextjs editorgridpanel tutorialif (isset($_GET[download])) downloadfile($_GET[download]);extjs form date limitation to todayExtJS HttpProxy params POSTuploadfile ajaxrequest extjsextjs themesextjs file uploadextjs themeextjs uploadextjs upload fileextjs login formextjs grid checkboxextjs grid pagingextjs loginextjs tutorialext js login formlogin page using extjsfile upload extjsjson reader extjsextjs themeextjs uploadadd image after textfield in extjsSimpleListingEditorGrid getSelections(); is not a functionSimpleListingEditorGrid getSelections(); is not a functionextjs buttonCfg