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

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???

Tags: Address Type, Array, Bbar, Data Grid, extjs, FAQs Help and Tutorials, Field Id, Header Email, Header Name, Language, MySQL, New Id, Paging, PHP, Programming, Select, Source code, SQL, String Function, String Name, Type Int, Type String

Incoming search terms for the article:

extjs grid paging , extjs paging , extjs paging grid , extjs local paging , grid paging extjs , paging grid extjs , extjs paging example , paging in extjs , ext js grid paging , koneksi php extjs , Ext grid GridPanel paging , extjs grid mysql json , extjs paging grid example , simple grid in extjs , extjs simple grid , extjs paging php , extjs grid data not displaying , paging extjs , paging extjs grid , how to add time field in extjs3 0 , extjs show data from mysql , extjs servlet tutorial , extjs services_json->decode OBJECT , simple paging extjs , menampilkan data mysql dengan ext js , extjs search paging , paging grouping extjs , extjs paging start , extjs paging sample , extjs store paging local , pagination extjs with php mysql , EXTJS to send email , paging of extjs grid , local paging extjs grid , php json extjs pagining , how to use GridPanel in extjs3 0 , how to include EXTJS , php mysql in extjs grid , Send String in Json format from jsp to Ext js , simple extjs example with php and mysql , grid pagination examples in extjs , grid extjs php , extjs>mysql>json>grid , grid extjs JSON , extjs paging issue , extjs paging handled by json or query? , extjs grid no data , asp extjs json , extjs grid mysql data , Extjs grid json and php extjs themes , extjs file upload , extjs theme , extjs upload , extjs upload file , extjs grid checkbox , extjs tutorial , extjs login , extjs login form , extjs grid paging site:defafe com , site:defafe com , site:defafe com , data base grid checkbox extjs , how to check password and confirm password in php , login window for extjs , tbar checkbox extjs , checkbox tbar grid extjs , extjs access session , find expanded rows in ext grid 

This entry was posted by faisal at on Wednesday, February 11th, 2009 at 8:17 pm and is filed under Tutorial Extjs, Tutorial HTML, Tutorial PHP. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.