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 .

Incoming search terms for the article:

extjs grid pagingextjs pagingextjs paging gridextjs local paginggrid paging extjsextjs paging examplepaging in extjshow to display mysql data using php data in extjs gridpaging in ext JSpaging grid extjsextjs themesextjs file uploadextjs themeextjs uploadextjs upload fileextjs login formextjs grid checkboxextjs grid pagingextjs loginextjs tutorialext js login formlogin page using extjsfile upload extjsjson reader extjsextjs themeextjs uploadadd image after textfield in extjsSimpleListingEditorGrid getSelections(); is not a functionSimpleListingEditorGrid getSelections(); is not a functionextjs buttonCfg