Tutorial Extjs: Grouping

CREATE TABLE IF NOT EXISTS `simpleform1` (
`id` int(11) NOT NULL auto_increment,
`name` varchar(50) NOT NULL,
`address` varchar(50) NOT NULL,
`email` varchar(50) NOT NULL,
`country` varchar(50) NOT NULL,
PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=11 ;

--
-- Dumping data for table `simpleform1`
--

INSERT INTO `simpleform1` (`id`, `name`, `address`, `email`, `country`) VALUES
(1, 'osawa', 'JL. Ahmad Tamrin', 'osawa@yahoo.com', 'japan'),
(2, 'Miecky', 'Jl. Lubang Buaya', 'Miekey@yahoo.com', 'indonesia'),
(3, 'Gerson', 'Jl. Kertajaya', 'Gerson@gmail.com', 'Italia'),
(4, 'Tegar Hasadi', 'Jl. Tamrin', 'tegar@gmail.com', 'indonesia'),
(5, 'Toni', 'Jl. Bubutan', 'toni@yahoo.com', 'Italia'),
(6, 'Cassano', 'Jl Seomare', 'cassano@yahoo.com', 'Italia'),
(7, 'Dego M', 'Jl Ketapang', 'Dego@gmail.com', 'Brazil'),
(8, 'Sule M', 'Jl Waru', 'Sule@yahoo.com', 'Brazil'),
(9, 'Hemas', 'Jl Ponggok', 'hemas@yahoo.com', 'Korea');

$nameserver = "localhost";
$username = "root";
$password = "";
$dbname = "defafe";//name of a database that I create
mysql_connect($nameserver,$username,$password)or die('error'.mysql_error());
mysql_select_db($dbname);
?>

3. index.html

//include simplegridg.js

After that we create a javascript file to make a form
4. simplegridg.js

Ext.onReady(function(){

Ext.QuickTips.init();
// this script is the important points of this tutorial
var SimpleDataStore = new Ext.data.GroupingStore({
proxy: new Ext.data.HttpProxy({
url: 'simplegridg.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'},
{name: 'country', type: 'string'}

]),
sortInfo:{field: 'country', direction: "ASC"},
groupField:'country' // this script is the important points of this tutorial ,  grouping by country
});

SimpleDataStore.load({params:{start:0,limit:6}});
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: 200

},{
header: 'Email',
dataIndex: 'email',
vtype:'email',
width: 180
},
{
header: 'Country',
dataIndex: 'country',
width: 180
}]
);
SimpleColumnModel.defaultSortable= true;

var SimpleListingEditorGrid =  new Ext.grid.GridPanel({
title: 'Simple Grid',
store: SimpleDataStore,
cm: SimpleColumnModel,
//// this script is the important points of this tutorial , Compenent Grid grouping
view: new Ext.grid.GroupingView({
forceFit:true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
}),
//......

frame:true,
collapsible: true,
animCollapse: true,
width:480,
height:290,

bbar: new Ext.PagingToolbar({
pageSize: 6,
store: SimpleDataStore,
displayInfo: true,
displayMsg: 'Displaying data {0} - {1} of {2}',
emptyMsg: "No data to display"
})

});

SimpleListingEditorGrid.render('form');

});

After that, we create a  php file to request data from the database and display it in the grid

5. simplegridg.php

include "koneksi.php";
include  "JSON.php";

$query = "SELECT * FROM simpleform1";    //this is the name of my table
$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;
}

?>

Below is a screen shot of this tutorial

Download Source code

Tags: Auto Increment, Cassano, Country Values, Database 2, Dego, Gerson, Gmail, Hemas, Insert, Italia 7, Kertajaya, Ketapang, Languages, Lubang Buaya, MyISAM, MySQL, Nameserver, Null, Osawa, Programming, Root Password, Search Data, Select, SQL, Sule, Tamrin, Tegar, Waru

Incoming search terms for the article:

This entry was posted by faisal at on Friday, February 13th, 2009 at 10:52 am 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.