In this section, we will learn about how to show data from database to grid form. In this post we need more file, on of is JSON.php, this file is very important, without this file we can not display data to grid form. And in this post we will also learn paging grid extjs.
here is screenshot of this tutorial


here is source code of this tutorial
1. simplegrid.php
<?php
include "koneksi.php";
include "JSON.php";
$query = "SELECT * FROM simpleform";
$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;
$result = mysql_query($limit);
if($nbrows>0)
{
while($rec = mysql_fetch_array($result)) {
$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;
}
?>
2. simplegrid.js
Ext.onReady(function(){
Ext.QuickTips.init();
var SimpleDataStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: 'simplegrid.php',
method: 'POST'
}),
reader: new Ext.data.JsonReader({
root: 'results',
totalProperty: 'total'
},
[
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'address', type: 'string'},
{name: 'email', type: 'string'}
]),
sortInfo:{field: 'id', direction: "ASC"}
});
SimpleDataStore.load({params:{start:0,limit:5}}); //limit display in grid
var SimpleColumnModel = new Ext.grid.ColumnModel(
[{
header: 'Id',
readOnly: true,
dataIndex: 'id',
width: 40,
hidden: false
},{
header: 'Name',
dataIndex: 'name',
width: 130
},{
header: 'Address',
dataIndex: 'address',
width: 160
},{
header: 'Email',
dataIndex: 'email',
width: 160
}]
);
SimpleColumnModel.defaultSortable= true;
var SimpleListingEditorGrid = new Ext.grid.GridPanel({
title: 'Simple Grid',
store: SimpleDataStore,
cm: SimpleColumnModel,
width:455,
height:210,
bbar: new Ext.PagingToolbar({ //paging grid
pageSize: 5,
store: SimpleDataStore,
displayInfo: true,
displayMsg: 'Displaying data {0} - {1} of {2}',
emptyMsg: "No data to display"
})
});
SimpleListingEditorGrid.render('form');
});
Any question???
Simple Paging Grid Extjs is posted on February 11th, 2009 by faisal. This post is filed under: Tutorial Extjs, Tutorial HTML, Tutorial PHP, FAQs Help and Tutorials, Language, MySQL, PHP, Programming, Select, Source code, SQL .

mas, ajarin y
tengkyu b4…tampilannya apik pol
ok mas……
I am new in JSON. Can u send me the total example for me please. my email : getshahidonline@yahoo.com.
ok….
can you please let me know how to convert the php to jsp or servlet?
Thanks
I am new to ExtJS. Please add the JSON Code. or send me the total example for me please. my email : makafui@innocreek.com
Please give same functionality with classical asp.
Otherwise give how can include ExtJs in my classical asp page.
Dear Sir ypu include following two PHP files
include “koneksi.php”;
include “JSON.php”;
what is the purpose of this files
whenever i use grid that time you need to include that files.
Hello ! I am new to ExtJS too. Please send me the total example for me please. Thanks.