Mumpung lagi ada waktu, saya ingin melanjutkan tutorial tentang extjs, Tutorial ini baru saya buat tadi pagi setelah pulang dari jaga warnet,, Sebenarnya ingin tidur karena sudah ngantuk, tapi entah kenapa nyampek di kosan tidak bisa tidur atau turu kata orang jawa,, padahal temen sekamarku pas saya nyampek kosan kelihatannya nyenyak buanget tidurnya,, dan tau gak sampek jam berapa dia bngun? setengah 1 coy mantap buanget ,, (moga temanku tidak baca blog ini nanti di cerai bisa-bisa saya di cerai hehehe..hehe..). Lho kok malah melenceng dari topik? sory kawan.. :D

Ok kita mulai aja tutorialnya,, kali in buruh internet ongin menjelaskan tentang cara membuat paging grid menggunakan Exjs,, maksud paging disni yaitu mensplit data yang ingin kita tampilkan di web (pemberian nomor) benar nggak? tujuannya sich biar nggak banyak makan space halaman di web kita dan biar enak juga kalau di lihat.

Note: Anda sudah membaca tutorial ku yang sebelumnya: membuat form login dengan extjs ;))

Untuk membut paging grid dengan menggunakan extjs tentunya kamu sudah punya frameworknya, disini saya menggunakan extjs versi ext-2.2,, sepertinya ini masih yang terbaru...

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


Baca juga cara membuat add, edit dan delete menggunakan extjs dan php
Title: Tutorial Form Grid Extjs: Paging Grid Extjs
Posted by faisal

Thanks for reading about Tutorial Form Grid Extjs: Paging Grid Extjs