Paging Grid Extjs

Ini adalah snapshot dari paging extjs yang aq buat:

Berikut langkah-langkah untuk membuat tampilan seperti diatas:

1. Buat database terlebih dahulu, setelah itu buat table, dan fieldnya... nich caranya:


CREATE TABLE `grid` (
`id` int(10) NOT NULL auto_increment,
`nama` varchar(100) NOT NULL,
`alamat` varchar(100) NOT NULL,
`tgl_Laporan` varchar(50) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;


INSERT INTO `grid` (`id`, `nama`, `alamat`, `tgl_Laporan`) VALUES
(1, 'faisal', 'gebang wetan', '01/03/1986'),
(2, 'kahayan', 'ponggok blitar', '01/19/1991'),
(3, 'ica', 'ponggok', '01/02/2004'),
(4, 'sanah', 'seduur', '03/04/2005'),
(5, 'kandar', 'ponggok', '03/04/1979'),
(6, 'sirat', 'pakong', '03/05/1976');

2. Kemudian Buatlah file php untuk koneksi ke database.

<?php
$nameSer = "localhost";
$username ="root";
$pass = "";
$dbname = "blog";
$koneksi = mysql_connect($names,$username,$pass)or die('error'.mysql_errno());
$selecdb = mysql_select_db($dbname);
?>

3. Buat file javascriptnya untuk tampilan formnya.
var NiagaDataStore;
var NiagaColumnModel;
var NiagaListingEditorGrid;

Ext.onReady(function(){
Ext.QuickTips.init();
NiagaDataStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'grid.php', //manggil file grid.php
method: 'POST'
}),
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total'
},
[
{name: 'id', type: 'int'},//sesuai nama field yang di database
{name: 'nama', type: 'string'},//sesuai nama field yang di database
{name: 'alamat', type: 'string'},//sesuai nama field yang di database
{name: 'tgl_Laporan', type: 'string'}//sesuai nama field yang di database

]),
sortInfo:{field: 'id', direction: "ASC"}//urut berdasarkan id
});

NiagaDataStore.load({params:{start:0,limit:5}}); //menampilkan data sebayak 5 record

//tampilan awal
NiagaColumnModel = new Ext.grid.ColumnModel( // Tampilan form paging Grid
[{
header: 'Id',
readOnly: true,
dataIndex: 'id',
width: 40,
hidden: false

},{
header: 'Nama',
dataIndex: 'nama',
width: 130,
editor: new Ext.form.TextField({
allowBlank: false,
maxLength: 20,
maskRe: /([a-zA-Z0-9\s]+)$/
})
},{
header: 'Alamat',
dataIndex: 'alamat',
width: 160,
editor: new Ext.form.TextField({
allowBlank: false,
maxLength: 20,
maskRe: /([a-zA-Z0-9\s]+)$/
})
},{
header: 'Tanggal Laporan',
dataIndex: 'tgl_Laporan',
width: 120,
renderer: Ext.util.Format.dateRenderer('m/d/Y'),
editor: new Ext.form.DateField({
format: 'm/d/Y'
}),
hidden: false
}]
);
NiagaColumnModel.defaultSortable= true;

//tampilan luar
NiagaListingEditorGrid = new Ext.grid.GridPanel({
title: 'Form Paging Grid',
store: NiagaDataStore,
cm: NiagaColumnModel, //manggil NiagaColumnModel
width:455,
height:210,


bbar: new Ext.PagingToolbar({ //buat paging
pageSize: 5, batas nya 5
store: NiagaDataStore,
displayInfo: true,
displayMsg: 'Displaying data {0} - {1} of {2}',
emptyMsg: "No data to display"
})

});

NiagaListingEditorGrid.render('form');

});

4. buat file php untuk request data dari database

<?php
include "koneksi.php";//manggil file koneksi.phpinclude "JSON.php";//manggil file JSON.php
$query = "SELECT * FROM grid"; $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['tgl_Laporan']=codeDate($rec['tgl_Laporan']); $arr[] = $rec; } $jsonresult = JEncode($arr); echo '({"total":"'.$nbrows.'","results":'.$jsonresult.'})'; } else { echo '({"total":"0", "results":""})'; }

// Encodes a SQL array into a JSON formated stringfunction 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;}
// Encodes a YYYY-MM-DD into a MM-DD-YYYY stringfunction codeDate ($date) { $tab = explode ("-", $date); $r = $tab[1]."/".$tab[2]."/".$tab[0]; return $r;}
// Encodes a MM-DD-YYYY into a YYYY-MM-DD stringfunction decodeDate ($date) { $tab = explode ("/", $date); $n = count($tab); if($n==3) { $r = $tab[2]."-".$tab[0]."-".$tab[1]; } else { $r = ""; } return $r;}?>

5. Dan yang terpenting dari tutorial ini yaitu jangan lupa untuk menyertakan file JSON.php file ini digunakan ketika kita mau request data dari database,, disini kalian g usah pusing-pusing mikirin isi dari file JSON.php ini, karena file ini tinggal qt pakek (di panggil atau di includekan di file php.) file ini bisa di download di sini

Mungkin cukup sekian tutorialnya jika ada pertanyaan silahkan tinggalkan comment.
kamu bisa medownload source code lengkapnya disini