Tutorial Extjs: Download File
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
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
![Reblog this post [with Zemanta]](http://img.zemanta.com/reblog_e.png?x-id=ccb4eab6-c370-40af-9f21-6639f90630da)
Tags: Cell Cell, Css Files, Download File, Field Id, Handler Function, Javascipt, JSON, PHP, Programmer, Programming, Renderer, SQL, True Width, Tutorial, upload file, upload image
nice inpo gan…
Bro.. ????????
Wah kalau mau download dimana yah… tutorialnya
saya kirim email aja mas
mantap banget mas..
ajari saya penggunaan JSON la mas, belum ludeng,
via japri aja yah mas ke if07035@gmail.com
salam,
Thanks for all your tutorials!
Very good work!
mas,,bole minta dowloadan tutorial ext js ga??saya baru belajar ext js…
thx before…
OK, tunggu mas nanti saya bikin link untuk mendowload semua tutorial yang ada di blog ini, terima kasih telah berkunjung di website ini
boleh request tutorial tentang nampilin gambar di form setelah ada aksi row click?? bingung?
terima kasih, tutorial2nya bermanfaat banget. di tunggu tutorial selanjutnya. salam.
mas.. pernah pake Ext.Ajax.request g??
klo kita mo download file xls bsa g sh pake Ext.Ajax.request??
thanks..
mas,,boleh minta downloadan tutorial extjs ga?? saya baru belajar niy n nyari tutorialnya susah bgt…
thx a lot yah
thanks a lot brother for these tutorials
me too
bisa sob
Bro… kode untuk ambil file dari database yang bisa di download dimana ya????
Thanks for yur attention..
di dtutorial sebelumny ada bro
Masalahnya gini saya punya table inventaris dan ketika button “Detail Data” diklik maka akan tampil hanya data dari Table History(Form ke-2) yg kode pada table history = kode pd table inventaris.
Nah, gmn caranya mas??? di bawah ini masih tampil semua…
Untuk menampilkan data dr database saya pake Ext.data.GroupingStore.
saya sudah tambahkan gini…
var m = data_inventaris_grid.getSelections();
var GrupStore_data_history = new Ext.data.GroupingStore({
proxy: new Ext.data.HttpProxy({
url: ‘data_history.php?kode=’+ m[0].get(’kode’),
method: ‘POST’
}),
baseParams:{task: “LISTING”},
reader: new Ext.data.JsonReader({
root: ‘results’,
totalProperty: ‘total’,
id: ‘id’,
fields: ['id','tgl','history','kode']
}),
sortInfo:{field: ‘id’, direction: “ASC”}
});
GrupStore_data_history.load({params:{start:0,limit:10}});
KET : data_inventaris_grid adalah Ext.grid.GridPanel dari table inventaris
baseParams “LISTING “ mengacu pada sql query pada data_history.php
dengan $SQL = mysql_query(“SELECT * FROM history WHERE kode = $_GET(“kode”)”);
tapi tetep tampil smw..pake listeners: {load: handleActivate}, juga gak bisa Maz.KENAPA ya maz…???
Dan gimana solusinya…????
Best Regards
please check this script “url: ‘data_history.php?kode=’+ m[0].get(’kode’),”
and you can check the previous tutorial about editing data in the grid. and I apologize if it’s too late to answer.
thanks for all