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:

download

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:

Related article by another person

Reblog this post [with Zemanta]

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

19 Responses to “Tutorial Extjs: Download File”

  1. nice inpo gan…

  2. Bro.. ????????

  3. Wah kalau mau download dimana yah… tutorialnya

  4. saya kirim email aja mas

  5. mantap banget mas..

  6. ajari saya penggunaan JSON la mas, belum ludeng,
    via japri aja yah mas ke if07035@gmail.com
    salam,

  7. Thanks for all your tutorials!

    Very good work!

  8. mas,,bole minta dowloadan tutorial ext js ga??saya baru belajar ext js…
    thx before…

  9. OK, tunggu mas nanti saya bikin link untuk mendowload semua tutorial yang ada di blog ini, terima kasih telah berkunjung di website ini

  10. boleh request tutorial tentang nampilin gambar di form setelah ada aksi row click?? bingung?
    terima kasih, tutorial2nya bermanfaat banget. di tunggu tutorial selanjutnya. salam.

  11. mas.. pernah pake Ext.Ajax.request g??

    klo kita mo download file xls bsa g sh pake Ext.Ajax.request??

    thanks.. :D

  12. mas,,boleh minta downloadan tutorial extjs ga?? saya baru belajar niy n nyari tutorialnya susah bgt…

    thx a lot yah

  13. thanks a lot brother for these tutorials

  14. me too

  15. bisa sob

  16. Bro… kode untuk ambil file dari database yang bisa di download dimana ya????

    Thanks for yur attention..

  17. di dtutorial sebelumny ada bro

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

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

Leave a Reply

Blog Directory & Search engine

Search Engine Optimization and SEO Tools
Web design blogs eLearning & Online Learning Blogs - BlogCatalog Blog Directory Search Engine Submission - AddMe