Tutorial:Building-grid-with-livesearch-form--chapter-2

From Learn About the Ext JavaScript Library

Jump to: navigation, search

Summary: Building grid component with livesearch form chapter 2

Author: Fransjo Leihitu

Published: 2007-02-20

Ext Version: 2.0

Languages:

English

If you haven't read part 1, I suggest to read it first: [1].

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Tutorial Final</title>
    <link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
    <link rel="stylesheet" type="text/css" href="styles.css" />
 
    <!-- GC -->
 	<!-- LIBS -->
 	<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
 	<!-- ENDLIBS -->
 
    <script type="text/javascript" src="../../ext-all.js"></script>
 
    <script type="text/javascript" src="RowExpander.js"></script>
    <script type="text/javascript" src="tutorial.js"></script>
 
</head>
<body>
 
<div id='wrapper'>
	<h1>Tutorial Final</h1>
 
	People in the database: George,Melanie,Brad,Sandra,Jasper,Jim
 
	<div id='searchWrapper'></div>
	<div id='gridWrapper'></div>
</div>
 
 
</body>
</html>

As you can see I've included a js file called tutorial.js. This is where we'll define the Grid/Datastore etc.

Also you'll see that I've created two empty divs : searchWrapper (the formfield wil be rendered here) and gridWrapper(the grid component will be rendered here).

JS file

And to start the js file (tutorial.js)

/*
 * Ext JS Library 2.0.1
 * Copyright(c) 2006-2008, Ext JS, LLC.
 * licensing@extjs.com
 * 
 * http://extjs.com/license
 */
 
Ext.onReady(function()
{
 
 
 
});

Datastore

So first we'll set up the Datastore :

Ext.onReady(function()
{
	 Ext.QuickTips.init();
 
	// ----------------
	//	vars
	// ----------------
	var ds;	// datasource var
 
	// ----------------
	//	Create datasource
	// ----------------
	function createDS()
	{
		ds = new Ext.data.Store({
        	proxy: new Ext.data.HttpProxy({
            	url: 'search.php', // serverside script to post to
            	method: 'POST' // method of posting .. GET or POST .. I've used POST
        	})			
		});				
	}
 
 
	createDS();	    
});

Reader

At this point we've only set up the connection TO the server-side script. The script will return a JSON object, but the Datastore doesn't know what is what so now enters the reader:

Ext.onReady(function()
{
	 Ext.QuickTips.init();
 
	// ----------------
	//	vars
	// ----------------
	var ds;	// datasource var
 
	// ----------------
	//	Create datasource
	// ----------------
	function createDS()
	{
		ds = new Ext.data.Store({
        	proxy: new Ext.data.HttpProxy({
            	url: 'search.php', // serverside script to post to
            	method: 'POST' // method of posting .. GET or POST .. I've used POST
        	}),
 
        	// the reader
            reader:  new Ext.data.JsonReader({
				totalProperty: 'total',
				root: 'results', // the object wich old the records
				id: 'id', // the fieldname wich hold the id ... optional
				fields: ['id','name','email','comments'] // the fields the reader need to render 
			})        	
 
		});				
	}
 
	createDS();	    
});

Creating the database

So, now we have a way to connect to the server, we also need a database so the serverside script can query it. Here's my import script:

--
-- Table structure for table 'people'
--
 
DROP TABLE IF EXISTS `people`;
CREATE TABLE IF NOT EXISTS `people` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(255) NOT NULL,
  `email` varchar(255) NOT NULL,
  `comments` text NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=7 ;
 
--
-- Gegevens worden uitgevoerd voor tabel `people`
--
 
INSERT INTO `people` (`id`, `name`, `email`, `comments`) VALUES(1, 'George', 'apa@khabar.nl', 'Integer ligula tellus, egestas ac, gravida et, ultrices at, arcu. Praesent auctor diam nec dolor. Sed vehicula, libero a laoreet consequat, dui neque commodo odio, sit amet mattis sem nisi vitae tellus. Etiam et nunc. Mauris vel lorem. Praesent orci. Praesent diam ipsum, elementum nec, posuere vitae, semper eu, turpis. Cras viverra, turpis imperdiet vulputate commodo, ipsum mauris tempus quam, quis congue quam elit eget nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Suspendisse at erat non lorem ullamcorper vestibulum.\r\n');
INSERT INTO `people` (`id`, `name`, `email`, `comments`) VALUES(2, 'Melanie', 'blaat@aap.nl', 'Suspendisse in purus at ligula facilisis accumsan. Phasellus a leo. Ut nonummy risus. Proin neque dolor, porttitor nec, iaculis sed, vehicula et, mauris. Nunc ornare aliquet metus. In accumsan laoreet velit. Vivamus mollis ultrices magna. Nam mattis varius diam. Pellentesque fermentum diam nec lacus. Morbi vel metus. Nulla semper, tortor ut rhoncus mollis, nibh diam auctor velit, in convallis augue purus feugiat purus. Praesent justo. Ut est. Mauris sem turpis, tristique ac, euismod et, porta sed, lacus. Integer diam quam, aliquet quis, aliquet sit amet, blandit eu, risus. Etiam facilisis tempus mauris. Nullam non quam. Quisque volutpat dui et libero.\r\n');
INSERT INTO `people` (`id`, `name`, `email`, `comments`) VALUES(3, 'Brad', 'bokke@geit.com', 'Suspendisse in purus at ligula facilisis accumsan. Phasellus a leo. Ut nonummy risus. Proin neque dolor, porttitor nec, iaculis sed, vehicula et, mauris. Nunc ornare aliquet metus. In accumsan laoreet velit. Vivamus mollis ultrices magna. Nam mattis varius diam. Pellentesque fermentum diam nec lacus. Morbi vel metus. Nulla semper, tortor ut rhoncus mollis, nibh diam auctor velit, in convallis augue purus feugiat purus. Praesent justo. Ut est. Mauris sem turpis, tristique ac, euismod et, porta sed, lacus. Integer diam quam, aliquet quis, aliquet sit amet, blandit eu, risus. Etiam facilisis tempus mauris. Nullam non quam. Quisque volutpat dui et libero.\r\n');
INSERT INTO `people` (`id`, `name`, `email`, `comments`) VALUES(4, 'Sandra', 'panne@koek.nl', 'Fusce risus mi, aliquet in, congue eu, lacinia eget, ante. Nulla a nibh ac dolor lobortis vehicula. Phasellus lorem lorem, sodales quis, tincidunt id, posuere ac, magna. Praesent fringilla massa faucibus sem. Duis aliquet scelerisque augue. Praesent libero risus, consectetuer et, dapibus eu, suscipit sit amet, tortor. Fusce enim lorem, pulvinar eget, congue quis, aliquet in, diam. Aenean laoreet sem at quam. Mauris adipiscing pharetra risus. Sed rutrum. Vivamus blandit, lorem ut pharetra interdum, elit justo pretium dolor, rutrum pellentesque tellus nisl eu lectus. Duis urna ipsum, dictum ac, faucibus et, scelerisque ut, est. Maecenas tempor ligula et pede. In at felis. Sed orci lacus, scelerisque at, aliquam nec, accumsan in, mauris. Maecenas id elit sed mi congue nonummy. Sed mauris nisl, faucibus et, porta sit amet, luctus in, augue. Phasellus ut ipsum in neque imperdiet rutrum.\r\n');
INSERT INTO `people` (`id`, `name`, `email`, `comments`) VALUES(5, 'Jasper', 'hoe@dan.com', 'Vestibulum aliquam ante ac tortor. Donec libero justo, facilisis ac, ultrices id, consequat ut, metus. Nunc tincidunt purus eu pede. Vivamus purus sapien, tincidunt a, vehicula et, mattis vel, diam. Etiam elementum, odio molestie placerat commodo, libero ligula ultricies lorem, et scelerisque est lorem id neque. Vestibulum nec erat vitae leo varius laoreet. Proin posuere nisl sed felis. Duis dui libero, blandit eu, nonummy sed, placerat aliquet, ipsum. Donec ornare nisl. Mauris eu orci eget enim pharetra dictum. Maecenas ultrices dictum massa. Donec egestas rutrum risus.\r\n');
INSERT INTO `people` (`id`, `name`, `email`, `comments`) VALUES(6, 'Jim', 'bijna@klaar.com', 'Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque in metus. Mauris varius vulputate mauris. Ut pellentesque lectus nec velit. Etiam non ligula. Curabitur bibendum, tortor at facilisis fringilla, turpis libero interdum tellus, in bibendum risus enim feugiat velit. Etiam pellentesque adipiscing neque. Donec lectus. Fusce lorem nunc, sodales non, lobortis eu, interdum ac, nulla. In iaculis ipsum eu lorem. Integer quis dolor mollis erat dignissim gravida. Donec scelerisque dapibus lectus. Mauris neque erat, fringilla eu, faucibus nec, semper quis, sem. Duis lacinia sapien eu leo. Suspendisse enim sapien, consectetuer eu, dapibus eget, congue ut, purus. Quisque eget tellus. Mauris turpis. Morbi egestas dictum lectus. Praesent vehicula mi at arcu hendrerit blandit.\r\n');

Search script

And last but not least, the search script (search.php)

<?php
	include("../connection.php"); // include the database connection files
	include("../JSON.php"); // my server doesn't have native JSON, so this class will help
 
 
	// basic function to search
	function search($query="")
	{
		$payload=array(); // payload array to convert to JSON
		$payload["total"]=0;
		$payload["results"]=array();
 
		$sql="";
 
		// do we have a empty search query yes or no?
		if(trim($query)!="")
		{
			// search on NAME
			$sql="SELECT * FROM people WHERE (name LIKE '%" . mysql_real_escape_string(trim($query)) . "%')";
 
			// we got results?
			if($rs=mysql_query($sql))
			{
				// yes we do
				$payload["total"]=mysql_num_rows($rs);
				while($data=mysql_fetch_assoc($rs))
				{
					// add each record to the "results" field
					$payload["results"][]=$data;
				}
			}
		}
 
		// setup up a JSON service
		$json = new Services_JSON();
 
		// return the converted payload array
		return $json->encode($payload);		
	}
 
 
 
	$searchResults=search(); // standard search
 
	// let's connect to the database
	if(connectDB("YOUR DATABASE NAME HERE"))
	{
		// is there a search query?
		if(isSet($_POST["query"]))
		{
			// yes there is a search query, so lets try and find the name
			$searchResults=search($_POST["query"]);			
		}
	}
 
	// print out the searchresults
	print $searchResults;
?>

So at this point we have a working Datastore wich can send and recieve data.

Ok, let's create the grid.

http://extjs.com/learn/Tutorial:Building-grid-with-livesearch-form--chapter-3

Ext

Personal tools

Views

Tutorial:Building-grid-with-livesearch-form--chapter-2

From Learn About the Ext JavaScript Library

Contents

HTML

JS file

Datastore

Reader

Creating the database

Search script

Learn Ext JS

Learn Ext GWT

Wiki Utilities

Toolbox

Ext JS

Ext GWT

Ext Core

JSBuilder

Support Subscriptions

Training

Community

Ext Solutions

Ext JS

Ext GWT

Help