Mudah Menampilkan Tabel Menggunakan ExtJS Grid Panel

Ingin menampilkan tabel mysql pakai extjs grid? Berikut adalah salah satu cara mudahnya.. cekidot!
Terdiri dari tiga file

index.php : halaman yang akan menampilkan grid
store.php : script yang menjadi sumber data dari grid
TableGrid.js : kelas turunan Ext.grid.GridPanel untuk menampilkan data dari tabel

Screen Shoot

Lihat Kode

index.php


<html>

<head>

<title>Menampilkan Tabel Dengan ExtJs Grid</title>



<!-- sesuaikan http://static.eprofile.web.id/ dengan lokasi instalasi extjsmu ya -->

<link rel="stylesheet" type="text/css" href="http://static.eprofile.web.id/ext-3.2.1/resources/css/ext-all.css" />

<script type="text/javascript" src="http://static.eprofile.web.id/ext-3.2.1/adapter/ext/ext-base.js"></script>

<script type="text/javascript" src="http://static.eprofile.web.id/ext-3.2.1/ext-all.js"></script>



<script type="text/javascript" src="TableGrid.js"></script>



<script type="text/javascript"> 

Ext.onReady(function(){



var tableGrid1 = new MyApp.TableGrid({

title:'Grid 1'

});

tableGrid1.render('grid-example1');



var tableGrid2 = new MyApp.TableGrid({

title:'Yang ini Grid kedua'

});

tableGrid2.render('grid-example2');



});

</script>

</head>

<body>

<div id="grid-example1"></div>

<br/>

<div id="grid-example2"></div> 

</body>

</html>

store.php

<?php
/** DDL Table **/
/*
CREATE TABLE `t_data` (
`id` int(10) unsigned NOT NULL auto_increment,
`nama` text collate latin1_general_ci,
`telepon` text collate latin1_general_ci,
`website` text collate latin1_general_ci,
PRIMARY KEY (`id`)
) ENGINE=MyISAM AUTO_INCREMENT=9 DEFAULT CHARSET=latin1 COLLATE=latin1_general_ci;
*/
/** Sample Record **/
/*
INSERT INTO `t_data` VALUES ('1', 'Fridayana Baabullah', '087889486240', 'http://baabullah.blogspot.com');
INSERT INTO `t_data` VALUES ('2', 'Fridayana Baabullah', '087889486240', 'http://baabullah.blogspot.com');
INSERT INTO `t_data` VALUES ('3', 'Fridayana Baabullah', '087889486240', 'http://baabullah.blogspot.com');
INSERT INTO `t_data` VALUES ('4', 'Fridayana Baabullah', '087889486240', 'http://baabullah.blogspot.com');
INSERT INTO `t_data` VALUES ('5', 'Fridayana Baabullah', '087889486240', 'http://baabullah.blogspot.com');
INSERT INTO `t_data` VALUES ('6', 'Fridayana Baabullah', '087889486240', 'http://baabullah.blogspot.com');
INSERT INTO `t_data` VALUES ('7', 'Fridayana Baabullah', '087889486240', 'http://baabullah.blogspot.com');
INSERT INTO `t_data` VALUES ('8', 'Fridayana Baabullah', '087889486240', 'http://baabullah.blogspot.com');
*/
/**
* Secara default tabel menampilkan 5 data
* pada setiap halamannya
*/
$limit = 5;
/**
* Secara default tabel akan menampilkan data
* dari awal terlebih dahulu
*/
$start = 0;
/**
* Ketika user melakukan klik pada tombol navigasi
* maka secara otomatis extjs akan mengirimkan parameter
* limit. Nah parameter ini kita tangkap untuk melakukan
* paginasi
*/
if (isset($_POST['limit'])) {
$limit = $_POST['limit'];
}
/**
* Ketika user melakukan klik pada tombol navigasi
* maka secara otomatis extjs juga akan mengirimkan
* parameter start. Nah parameter ini kita tangkap untuk
* melakukan paginasi.
*/
if (isset($_POST['start'])) {
$start = $_POST['start'];
}
/**
* Pada contoh ini, database yang digunakan adalah database
* di alamat localhost dan login sebagai root dengan passwordnya
* adalah root. Silakan sesuaikan dengan kondisi database mu.
*/
$con = mysql_connect('localhost', 'root', 'root');
/**
* Pada contoh ini, menggunakan database bernama public. Silakan
* sesuaikan dengan nama databasemu
*/
mysql_select_db('public', $con);

/**
* Pada contoh ini, menggunakan tabel bernama t_data. Silakan
* sesuaikan dengan nama tabel mu
*/
$table = 't_data';
/**
* Ini adalah query mendasar untuk pengambilan data
*/
$query = "select * from $table";
/**
* Disini kita akan hitung jumlah data dari query kita sebelumnya. ExtJs
* memerlukan informasi jumlah keseluruhan data agar bisa menampilkan
* navigasi dengan baik.
*/
$resultCount = mysql_query("select count(*) total_count from ($query) tdata", $con);
$row = mysql_fetch_assoc($resultCount);
$totalCount = (int) $row['total_count'];

/**
* Disini kita akan mengambil data sesuai dengan halaman yang diinginkan
* oleh user (sesuai dengan parameter start dan limitnya)
*/
$result = mysql_query("select * from ($query) tdata limit $start,$limit", $con);
$rows = array();
while ($row = mysql_fetch_assoc($result)) {
array_push($rows, $row);
}

/**
* Ini adalah langkah terakhir. Disini kita akan menampilkan informasi
* yang diperlukan oleh ExtJs dalam bentuk data JSON. Strukturnya harus
* memiliki property (1)root dan (2)total. root harus berisi array data
* dari table. total harus berisi jumlah keseluruhan baris yang ada
* di table.
*/
echo json_encode(array('root' => $rows, 'total' => $totalCount));

TableGrid.js

/**
* Mendeklarasikan namespace untuk aplikasi kita.
* Dengan namespace, maka akan mengurangi resiko
* bentrok nama kelas dengan aplikasi lain
*/
Ext.namespace('MyApp');
/**
* Deklarasi kelas TableGrid. Dengan dideklarasikannya kelas ini,
* maka kita bisa membuat banyak instance dalam satu page. Artinya
* dalam satu page, kita bisa menampilkan banyak grid yang berdiri
* sendiri.
*/
MyApp.TableGrid = function (config) {
Ext.apply(this, config);

this.store = new Ext.data.JsonStore({
root:'root',
fields:[
'id',
'nama',
'telepon',
'website'
],

url:'store.php'
});

MyApp.TableGrid.superclass.constructor.call(this, {
autoHeight:true,

columns:[{
header:'Id',
dataIndex:'id'
},{
header:'Nama',
dataIndex:'nama',
},{
header:'Telepon',
dataIndex:'telepon'
},{
header:'Alamat Website',
dataIndex:'website'
}],

viewConfig: {
forceFit: true
},

bbar: new Ext.PagingToolbar({
pageSize:5,
store:this.store,
displayInfo:true,
displayMsg:'Menampilkan data {0} - {1} dari {2}',
emptyMsg:'Tidak ada data yang bisa ditampilkan'
})
});

// otomatis data di load saat penciptaan object
this.store.load();
};
Ext.extend(MyApp.TableGrid, Ext.grid.GridPanel);

Cari Blog Ini

Fridayana Baabullah