Simple Paging Grid Extjs

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

grid1

grid21

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: , , , , , , , , , , , , , , , , , , , , ,

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 

9 Responses to “Simple Paging Grid Extjs”

  1. fredy says:

    mas, ajarin y :D tengkyu b4…tampilannya apik pol

  2. faisal says:

    ok mas……

  3. Salim says:

    I am new in JSON. Can u send me the total example for me please. my email : getshahidonline@yahoo.com.

  4. faisal says:

    ok….

  5. rama says:

    can you please let me know how to convert the php to jsp or servlet?
    Thanks

  6. Makafui Agbotta says:

    I am new to ExtJS. Please add the JSON Code. or send me the total example for me please. my email : makafui@innocreek.com

  7. Venkatesh says:

    Please give same functionality with classical asp.
    Otherwise give how can include ExtJs in my classical asp page.

  8. Venkatesh says:

    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.

  9. Wagner M. R. says:

    Hello ! I am new to ExtJS too. Please send me the total example for me please. Thanks.

Leave a Reply

Security Code: