Context Navigation

Back to Ticket #5877

Ticket #5877: QueryReadStore_grid_demos.patch

File QueryReadStore_grid_demos.patch, 23.7 kB (added by wolfram, 11 months ago)

data/tests/stores/QueryReadStore.php


3	3	header("Content-Type", "text/json");
4	4
5	5	$allItems = array(
6		array('name'=>"Alabama", 'label'=>"<img src='images/Alabama.jpg'/>Alabama", 'abbreviation'=>"AL"),
7		array('name'=>"Alaska", 'label'=>"Alaska", 'abbreviation'=>"AK"),
8		array('name'=>"American Samoa", 'label'=>"American Samoa", 'abbreviation'=>"AS"),
9		array('name'=>"Arizona", 'label'=>"Arizona", 'abbreviation'=>"AZ"),
10		array('name'=>"Arkansas", 'label'=>"Arkansas", 'abbreviation'=>"AR"),
11		array('name'=>"Armed Forces Europe", 'label'=>"Armed Forces Europe", 'abbreviation'=>"AE"),
12		array('name'=>"Armed Forces Pacific", 'label'=>"Armed Forces Pacific", 'abbreviation'=>"AP"),
13		array('name'=>"Armed Forces the Americas", 'label'=>"Armed Forces the Americas", 'abbreviation'=>"AA"),
14		array('name'=>"California", 'label'=>"California", 'abbreviation'=>"CA"),
15		array('name'=>"Colorado", 'label'=>"Colorado", 'abbreviation'=>"CO"),
16		array('name'=>"Connecticut", 'label'=>"Connecticut", 'abbreviation'=>"CT"),
17		array('name'=>"Delaware", 'label'=>"Delaware", 'abbreviation'=>"DE"),
18		array('name'=>"District of Columbia", 'label'=>"District of Columbia", 'abbreviation'=>"DC"),
19		array('name'=>"Federated States of Micronesia", 'label'=>"Federated States of Micronesia", 'abbreviation'=>"FM"),
20		array('name'=>"Florida", 'label'=>"Florida", 'abbreviation'=>"FL"),
21		array('name'=>"Georgia", 'label'=>"Georgia", 'abbreviation'=>"GA"),
22		array('name'=>"Guam", 'label'=>"Guam", 'abbreviation'=>"GU"),
23		array('name'=>"Hawaii", 'label'=>"Hawaii", 'abbreviation'=>"HI"),
24		array('name'=>"Idaho", 'label'=>"Idaho", 'abbreviation'=>"ID"),
25		array('name'=>"Illinois", 'label'=>"Illinois", 'abbreviation'=>"IL"),
26		array('name'=>"Indiana", 'label'=>"Indiana", 'abbreviation'=>"IN"),
27		array('name'=>"Iowa", 'label'=>"Iowa", 'abbreviation'=>"IA"),
28		array('name'=>"Kansas", 'label'=>"Kansas", 'abbreviation'=>"KS"),
29		array('name'=>"Kentucky", 'label'=>"Kentucky", 'abbreviation'=>"KY"),
30		array('name'=>"Louisiana", 'label'=>"Louisiana", 'abbreviation'=>"LA"),
31		array('name'=>"Maine", 'label'=>"Maine", 'abbreviation'=>"ME"),
32		array('name'=>"Marshall Islands", 'label'=>"Marshall Islands", 'abbreviation'=>"MH"),
33		array('name'=>"Maryland", 'label'=>"Maryland", 'abbreviation'=>"MD"),
34		array('name'=>"Massachusetts", 'label'=>"Massachusetts", 'abbreviation'=>"MA"),
35		array('name'=>"Michigan", 'label'=>"Michigan", 'abbreviation'=>"MI"),
36		array('name'=>"Minnesota", 'label'=>"Minnesota", 'abbreviation'=>"MN"),
37		array('name'=>"Mississippi", 'label'=>"Mississippi", 'abbreviation'=>"MS"),
38		array('name'=>"Missouri", 'label'=>"Missouri", 'abbreviation'=>"MO"),
39		array('name'=>"Montana", 'label'=>"Montana", 'abbreviation'=>"MT"),
40		array('name'=>"Nebraska", 'label'=>"Nebraska", 'abbreviation'=>"NE"),
41		array('name'=>"Nevada", 'label'=>"Nevada", 'abbreviation'=>"NV"),
42		array('name'=>"New Hampshire", 'label'=>"New Hampshire", 'abbreviation'=>"NH"),
43		array('name'=>"New Jersey", 'label'=>"New Jersey", 'abbreviation'=>"NJ"),
44		array('name'=>"New Mexico", 'label'=>"New Mexico", 'abbreviation'=>"NM"),
45		array('name'=>"New York", 'label'=>"New York", 'abbreviation'=>"NY"),
46		array('name'=>"North Carolina", 'label'=>"North Carolina", 'abbreviation'=>"NC"),
47		array('name'=>"North Dakota", 'label'=>"North Dakota", 'abbreviation'=>"ND"),
48		array('name'=>"Northern Mariana Islands", 'label'=>"Northern Mariana Islands", 'abbreviation'=>"MP"),
49		array('name'=>"Ohio", 'label'=>"Ohio", 'abbreviation'=>"OH"),
50		array('name'=>"Oklahoma", 'label'=>"Oklahoma", 'abbreviation'=>"OK"),
51		array('name'=>"Oregon", 'label'=>"Oregon", 'abbreviation'=>"OR"),
52		array('name'=>"Pennsylvania", 'label'=>"Pennsylvania", 'abbreviation'=>"PA"),
53		array('name'=>"Puerto Rico", 'label'=>"Puerto Rico", 'abbreviation'=>"PR"),
54		array('name'=>"Rhode Island", 'label'=>"Rhode Island", 'abbreviation'=>"RI"),
55		array('name'=>"South Carolina", 'label'=>"South Carolina", 'abbreviation'=>"SC"),
56		array('name'=>"South Dakota", 'label'=>"South Dakota", 'abbreviation'=>"SD"),
57		array('name'=>"Tennessee", 'label'=>"Tennessee", 'abbreviation'=>"TN"),
58		array('name'=>"Texas", 'label'=>"Texas", 'abbreviation'=>"TX"),
59		array('name'=>"Utah", 'label'=>"Utah", 'abbreviation'=>"UT"),
60		array('name'=>"Vermont", 'label'=>"Vermont", 'abbreviation'=>"VT"),
61		array('name'=> "Virgin Islands, U.S.", 'label'=>"Virgin Islands, U.S.", 'abbreviation'=>"VI"),
62		array('name'=>"Virginia", 'label'=>"Virginia", 'abbreviation'=>"VA"),
63		array('name'=>"Washington", 'label'=>"Washington", 'abbreviation'=>"WA"),
64		array('name'=>"West Virginia", 'label'=>"West Virginia", 'abbreviation'=>"WV"),
65		array('name'=>"Wisconsin", 'label'=>"Wisconsin", 'abbreviation'=>"WI"),
66		array('name'=>"Wyoming", 'label'=>"Wyoming", 'abbreviation'=>"WY"),
67		// array('id'=>, 'name'=>''),
	6	array('id'=>0, 'name'=>"Alabama", 'label'=>"<img src='images/Alabama.jpg'/>Alabama", 'abbreviation'=>"AL"),
	7	array('id'=>1, 'name'=>"Alaska", 'label'=>"Alaska", 'abbreviation'=>"AK"),
	8	array('id'=>2, 'name'=>"American Samoa", 'label'=>"American Samoa", 'abbreviation'=>"AS"),
	9	array('id'=>3, 'name'=>"Arizona", 'label'=>"Arizona", 'abbreviation'=>"AZ"),
	10	array('id'=>4, 'name'=>"Arkansas", 'label'=>"Arkansas", 'abbreviation'=>"AR"),
	11	array('id'=>5, 'name'=>"Armed Forces Europe", 'label'=>"Armed Forces Europe", 'abbreviation'=>"AE"),
	12	array('id'=>6, 'name'=>"Armed Forces Pacific", 'label'=>"Armed Forces Pacific", 'abbreviation'=>"AP"),
	13	array('id'=>7, 'name'=>"Armed Forces the Americas", 'label'=>"Armed Forces the Americas", 'abbreviation'=>"AA"),
	14	array('id'=>8, 'name'=>"California", 'label'=>"California", 'abbreviation'=>"CA"),
	15	array('id'=>9, 'name'=>"Colorado", 'label'=>"Colorado", 'abbreviation'=>"CO"),
	16	array('id'=>10, 'name'=>"Connecticut", 'label'=>"Connecticut", 'abbreviation'=>"CT"),
	17	array('id'=>11, 'name'=>"Delaware", 'label'=>"Delaware", 'abbreviation'=>"DE"),
	18	array('id'=>12, 'name'=>"District of Columbia", 'label'=>"District of Columbia", 'abbreviation'=>"DC"),
	19	array('id'=>13, 'name'=>"Federated States of Micronesia", 'label'=>"Federated States of Micronesia", 'abbreviation'=>"FM"),
	20	array('id'=>14, 'name'=>"Florida", 'label'=>"Florida", 'abbreviation'=>"FL"),
	21	array('id'=>15, 'name'=>"Georgia", 'label'=>"Georgia", 'abbreviation'=>"GA"),
	22	array('id'=>16, 'name'=>"Guam", 'label'=>"Guam", 'abbreviation'=>"GU"),
	23	array('id'=>17, 'name'=>"Hawaii", 'label'=>"Hawaii", 'abbreviation'=>"HI"),
	24	array('id'=>18, 'name'=>"Idaho", 'label'=>"Idaho", 'abbreviation'=>"ID"),
	25	array('id'=>19, 'name'=>"Illinois", 'label'=>"Illinois", 'abbreviation'=>"IL"),
	26	array('id'=>20, 'name'=>"Indiana", 'label'=>"Indiana", 'abbreviation'=>"IN"),
	27	array('id'=>21, 'name'=>"Iowa", 'label'=>"Iowa", 'abbreviation'=>"IA"),
	28	array('id'=>22, 'name'=>"Kansas", 'label'=>"Kansas", 'abbreviation'=>"KS"),
	29	array('id'=>23, 'name'=>"Kentucky", 'label'=>"Kentucky", 'abbreviation'=>"KY"),
	30	array('id'=>24, 'name'=>"Louisiana", 'label'=>"Louisiana", 'abbreviation'=>"LA"),
	31	array('id'=>25, 'name'=>"Maine", 'label'=>"Maine", 'abbreviation'=>"ME"),
	32	array('id'=>26, 'name'=>"Marshall Islands", 'label'=>"Marshall Islands", 'abbreviation'=>"MH"),
	33	array('id'=>27, 'name'=>"Maryland", 'label'=>"Maryland", 'abbreviation'=>"MD"),
	34	array('id'=>28, 'name'=>"Massachusetts", 'label'=>"Massachusetts", 'abbreviation'=>"MA"),
	35	array('id'=>29, 'name'=>"Michigan", 'label'=>"Michigan", 'abbreviation'=>"MI"),
	36	array('id'=>30, 'name'=>"Minnesota", 'label'=>"Minnesota", 'abbreviation'=>"MN"),
	37	array('id'=>31, 'name'=>"Mississippi", 'label'=>"Mississippi", 'abbreviation'=>"MS"),
	38	array('id'=>32, 'name'=>"Missouri", 'label'=>"Missouri", 'abbreviation'=>"MO"),
	39	array('id'=>33, 'name'=>"Montana", 'label'=>"Montana", 'abbreviation'=>"MT"),
	40	array('id'=>34, 'name'=>"Nebraska", 'label'=>"Nebraska", 'abbreviation'=>"NE"),
	41	array('id'=>35, 'name'=>"Nevada", 'label'=>"Nevada", 'abbreviation'=>"NV"),
	42	array('id'=>36, 'name'=>"New Hampshire", 'label'=>"New Hampshire", 'abbreviation'=>"NH"),
	43	array('id'=>37, 'name'=>"New Jersey", 'label'=>"New Jersey", 'abbreviation'=>"NJ"),
	44	array('id'=>38, 'name'=>"New Mexico", 'label'=>"New Mexico", 'abbreviation'=>"NM"),
	45	array('id'=>39, 'name'=>"New York", 'label'=>"New York", 'abbreviation'=>"NY"),
	46	array('id'=>40, 'name'=>"North Carolina", 'label'=>"North Carolina", 'abbreviation'=>"NC"),
	47	array('id'=>41, 'name'=>"North Dakota", 'label'=>"North Dakota", 'abbreviation'=>"ND"),
	48	array('id'=>42, 'name'=>"Northern Mariana Islands", 'label'=>"Northern Mariana Islands", 'abbreviation'=>"MP"),
	49	array('id'=>43, 'name'=>"Ohio", 'label'=>"Ohio", 'abbreviation'=>"OH"),
	50	array('id'=>44, 'name'=>"Oklahoma", 'label'=>"Oklahoma", 'abbreviation'=>"OK"),
	51	array('id'=>45, 'name'=>"Oregon", 'label'=>"Oregon", 'abbreviation'=>"OR"),
	52	array('id'=>46, 'name'=>"Pennsylvania", 'label'=>"Pennsylvania", 'abbreviation'=>"PA"),
	53	array('id'=>47, 'name'=>"Puerto Rico", 'label'=>"Puerto Rico", 'abbreviation'=>"PR"),
	54	array('id'=>48, 'name'=>"Rhode Island", 'label'=>"Rhode Island", 'abbreviation'=>"RI"),
	55	array('id'=>49, 'name'=>"South Carolina", 'label'=>"South Carolina", 'abbreviation'=>"SC"),
	56	array('id'=>50, 'name'=>"South Dakota", 'label'=>"South Dakota", 'abbreviation'=>"SD"),
	57	array('id'=>51, 'name'=>"Tennessee", 'label'=>"Tennessee", 'abbreviation'=>"TN"),
	58	array('id'=>52, 'name'=>"Texas", 'label'=>"Texas", 'abbreviation'=>"TX"),
	59	array('id'=>53, 'name'=>"Utah", 'label'=>"Utah", 'abbreviation'=>"UT"),
	60	array('id'=>54, 'name'=>"Vermont", 'label'=>"Vermont", 'abbreviation'=>"VT"),
	61	array('id'=>55, 'name'=> "Virgin Islands, U.S.", 'label'=>"Virgin Islands, U.S.", 'abbreviation'=>"VI"),
	62	array('id'=>56, 'name'=>"Virginia", 'label'=>"Virginia", 'abbreviation'=>"VA"),
	63	array('id'=>57, 'name'=>"Washington", 'label'=>"Washington", 'abbreviation'=>"WA"),
	64	array('id'=>58, 'name'=>"West Virginia", 'label'=>"West Virginia", 'abbreviation'=>"WV"),
	65	array('id'=>59, 'name'=>"Wisconsin", 'label'=>"Wisconsin", 'abbreviation'=>"WI"),
	66	array('id'=>60, 'name'=>"Wyoming", 'label'=>"Wyoming", 'abbreviation'=>"WY"),
68	67	);
69	68
70	69	$q = "";
71	70	if (array_key_exists("q", $_REQUEST)) {
72	71	$q = $_REQUEST['q'];
	72	}else if (array_key_exists("name", $_REQUEST)) {
	73	$q = $_REQUEST['name'];
73	74	}
	75
74	76	if (strlen($q) && $q[strlen($q)-1]=="*") {
75	77	$q = substr($q, 0, strlen($q)-1);
76	78	}
…	…
81	83	}
82	84	}
83	85
84		//Handle total number of matches as a return, regardless of page size.
	86	// Handle sorting
	87	if (array_key_exists("sort", $_REQUEST)) {
	88	$sort = $_REQUEST['sort'];
	89	// Check if $sort starts with "-" then we have a DESC sort.
	90	$desc = strpos($sort, '-')===0 ? true : false;
	91	$sort = strpos($sort, '-')===0 ? substr($sort, 1) : $sort;
	92	if (in_array($sort, array_keys($ret[0]))) {
	93	$toSort = array();
	94	foreach ($ret as $i) $toSort[$i[$sort]] = $i;
	95	if ($desc) krsort($toSort); else ksort($toSort);
	96	$newRet = array();
	97	foreach ($toSort as $i) $newRet[] = $i;
	98	$ret = $newRet;
	99	}
	100	}
	101
	102
	103	// Handle total number of matches as a return, regardless of page size, but taking the filtering into account (if taken place).
85	104	$numRows = count($ret);
86	105
87	106	// Handle paging, if given.

grid/demos/demo_QueryReadStore.html


	1	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
	2	<html>
	3	<head>
	4	<title>Dojox QueryReadStore+grid Demo</title>
	5	<style type="text/css">
	6	@import "../../../../dijit/themes/tundra/tundra.css";
	7	@import "../../../../dojo/resources/dojo.css";
	8	@import "../../../../dijit/tests/css/dijitTests.css";
	9	/* BE SURE TO NEVER FORGET IMPORTING THE GRID's CSS, or you will wonder why the hell the grid looks so strange (or even think that it doesnt work) */
	10	@import "../../../../dojox/grid/_grid/tundraGrid.css";
	11	</style>
	12
	13
	14	<script type="text/javascript" src="../../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true"></script>
	15	<script type="text/javascript">
	16	dojo.require("dojo.parser"); // scan page for widgets and instantiate them
	17	dojo.require("dojox.grid.Grid");
	18	dojo.require("dojox.grid._data.model"); // dojox.grid.data.DojoData is in there
	19	dojo.require("dojox.data.QueryReadStore");
	20	var gridLayout = [
	21	{
	22	cells: [[
	23	{
	24	name: "row #",
	25	width:5,
	26	styles: "text-align:right;",
	27	get:function(inRowIndex) { return inRowIndex+1;} // this auto generates a row num
	28	}
	29	,{
	30	name: "id",
	31	field: "id",
	32	styles: "text-align:right;",
	33	width:5
	34	}
	35	,{
	36	name: "Name",
	37	field: "name",
	38	width:20
	39	//formatter: rs.chunk.adminUser.grid.formatUser
	40	}
	41	,{
	42	name: "Label",
	43	width:20,
	44	//styles: "text-align:right;",
	45	field: "label"
	46	//formatter: phpr.grid.formatDate
	47	}
	48	,{
	49	name: "Abbrev.",
	50	width:5,
	51	//styles: "text-align:right;",
	52	field: "abbreviation"
	53	//formatter: phpr.grid.formatDate
	54	}
	55	]]
	56	}
	57	];
	58
	59	</script>
	60	</head>
	61	<body class="tundra">
	62
	63	<h1 class="testTitle">Dojox QueryReadStore + Grid demo - simplest</h1>
	64	Using with the grid - simple/stupid version, just load one page, no paging, no sorting<br />
	65	For some reason using less than 30 rows (rowsPerPage=30) on the grid makes the grid issue two requests for initially showing the grid.
	66	So we have set the rowsPerPage to 30.<br />
	67	You can see that data are loaded upon demand by scrolling down in the grid below line #30,
	68	open FireBug and you see a server request being issued, to retreive another 30 rows/items.<br />
	69	<b>Sorting does not work</b>, dont get confused, even though you can click on the header and it seems to sort, its only
	70	doing client data sort for the chunk (30 items) last loaded!!!
	71
	72	<h2>The store and grid are "generated" and connected in HTML, only the structure is defined in JS</h2>
	73	<b>Capabilities:</b> load data from server, show data, paging (30 rows at a time), <span style="text-decoration:line-through;">sort, filter</span>
	74	<div dojoType="dojox.data.QueryReadStore" jsId="store1" url="../../data/tests/stores/QueryReadStore.php" requestMethod="post" doClientPaging="false"></div>
	75	<div dojoType="dojox.grid.data.DojoData" jsId="model1" store="store1" rowsPerPage="30"></div>
	76	<div id="grid1" dojoType="dojox.Grid" model="model1" structure="gridLayout" style="height:300px; width:800px;"></div>
	77
	78	<h2>The grid is in HTML, store, model, etc. are created and connected via JS (like above just using JS)</h2>
	79	<b>Capabilities:</b> load data from server, show data, paging (30 rows at a time), <span style="text-decoration:line-through;">sort, filter</span>
	80	<div id="grid2" dojoType="dojox.Grid" style="height:300px; width:800px;"></div>
	81	<script>
	82	// Connect the model and store AFTER the page is loaded, since we can only access
	83	// the widget then, since it will be created just before dojo.addOnLoad() is called.
	84	dojo.addOnLoad(function() {
	85	// Instanciate the store, pass it to the model, connect them to the grid and add the layout ... just some hand work :-)
	86	var store = new dojox.data.QueryReadStore({url:"../../data/tests/stores/QueryReadStore.php", requestMethod:"post", doClientPaging:false});
	87	var model = new dojox.grid.data.DojoData(null, null, {store:store, rowsPerPage:30});
	88	var w = dijit.byId("grid2");
	89	w.setModel(model);
	90	w.setStructure(gridLayout);
	91	});
	92	</script>
	93
	94	</body>
	95	</html>

grid/demos/demo_QueryReadStore_filter.html


	1	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
	2	<html>
	3	<head>
	4	<title>Dojox QueryReadStore+grid Demo</title>
	5	<style type="text/css">
	6	@import "../../../../dijit/themes/tundra/tundra.css";
	7	@import "../../../../dojo/resources/dojo.css";
	8	@import "../../../../dijit/tests/css/dijitTests.css";
	9	/* BE SURE TO NEVER FORGET IMPORTING THE GRID's CSS, or you will wonder why the hell the grid looks so strange (or even think that it doesnt work) */
	10	@import "../../../../dojox/grid/_grid/tundraGrid.css";
	11	</style>
	12
	13	<script type="text/javascript" src="../../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true"></script>
	14	<script type="text/javascript" src="demo_QueryReadStore.js"></script>
	15	</head>
	16	<body class="tundra">
	17
	18	<h1 class="testTitle">Dojox QueryReadStore + Grid demo - sortable and filterable</h1>
	19
	20	<h2>The grid is in HTML, store, model, etc. are JS, sorting is added by extending the model class</h2>
	21	<b>Capabilities:</b> load data from server, show data, paging (30 rows at a time), sort, filter
	22	<br /><br />
	23	<input type="text" onkeyup="doSearch(this)" />
	24	<div id="grid1" dojoType="dojox.Grid" style="height:300px; width:800px;"></div>
	25	<script>
	26	// Connect the model and store AFTER the page is loaded, since we can only access
	27	// the widget then, since it will be created just before dojo.addOnLoad() is called.
	28	var grid = null;
	29	dojo.addOnLoad(function() {
	30	// Instanciate the store, pass it to the model, connect them to the grid and add the layout ... just some hand work :-)
	31	var store = new dojox.data.QueryReadStore({url:"../../data/tests/stores/QueryReadStore.php", requestMethod:"post", doClientPaging:false});
	32	var model = new DojoDataSortable(null, null, {store:store, rowsPerPage:30});
	33	grid = dijit.byId("grid1");
	34	grid.setModel(model);
	35	grid.setStructure(gridLayout);
	36	});
	37
	38	var lastSearchValue = "";
	39	function doSearch(el) {
	40	if (el.value!=lastSearchValue) {
	41	grid.model.query = {name:el.value};
	42	grid.model.requestRows(null, null, dojo.hitch(this, function() {
	43	grid.widget.updateRowCount(grid.model.getRowCount());
	44	}));
	45	lastSearchValue = el.value;
	46	}
	47	}
	48	</script>
	49
	50	</body>
	51	</html>

grid/demos/demo_QueryReadStore_sort.html


	1	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
	2	<html>
	3	<head>
	4	<title>Dojox QueryReadStore+grid Demo</title>
	5	<style type="text/css">
	6	@import "../../../../dijit/themes/tundra/tundra.css";
	7	@import "../../../../dojo/resources/dojo.css";
	8	@import "../../../../dijit/tests/css/dijitTests.css";
	9	/* BE SURE TO NEVER FORGET IMPORTING THE GRID's CSS, or you will wonder why the hell the grid looks so strange (or even think that it doesnt work) */
	10	@import "../../../../dojox/grid/_grid/tundraGrid.css";
	11	</style>
	12
	13	<script type="text/javascript" src="../../../../dojo/dojo.js" djConfig="isDebug:true, parseOnLoad: true"></script>
	14	<script type="text/javascript" src="demo_QueryReadStore.js"></script>
	15	</head>
	16	<body class="tundra">
	17
	18	<h1 class="testTitle">Dojox QueryReadStore + Grid demo - sortable</h1>
	19
	20	<h2>The grid is in HTML, store, model, etc. are JS, sorting is added by extending the model class</h2>
	21	<b>Capabilities:</b> load data from server, show data, paging (30 rows at a time), sort, <span style="text-decoration:line-through;">filter</span>
	22	<div id="grid1" dojoType="dojox.Grid" style="height:300px; width:800px;"></div>
	23	<script>
	24	// Connect the model and store AFTER the page is loaded, since we can only access
	25	// the widget then, since it will be created just before dojo.addOnLoad() is called.
	26	dojo.addOnLoad(function() {
	27	// Instanciate the store, pass it to the model, connect them to the grid and add the layout ... just some hand work :-)
	28	var store = new dojox.data.QueryReadStore({url:"../../data/tests/stores/QueryReadStore.php", requestMethod:"post", doClientPaging:false});
	29	var model = new DojoDataSortable(null, null, {store:store, rowsPerPage:30});
	30	var w = dijit.byId("grid1");
	31	w.setModel(model);
	32	w.setStructure(gridLayout);
	33	});
	34	</script>
	35
	36	</body>
	37	</html>

grid/demos/demo_QueryReadStore.js


	1	dojo.require("dojo.parser"); // scan page for widgets and instantiate them
	2	dojo.require("dojox.grid.Grid");
	3	dojo.require("dojox.grid._data.model"); // dojox.grid.data.DojoData is in there
	4	dojo.require("dojox.data.QueryReadStore");
	5	var gridLayout = [
	6	{
	7	cells: [[
	8	{
	9	name: "row #",
	10	width:5,
	11	styles: "text-align:right;",
	12	get:function(inRowIndex) { return inRowIndex+1;} // this auto generates a row num
	13	}
	14	,{
	15	name: "id",
	16	field: "id",
	17	styles: "text-align:right;",
	18	width:5
	19	}
	20	,{
	21	name: "Name",
	22	field: "name",
	23	width:20
	24	//formatter: rs.chunk.adminUser.grid.formatUser
	25	}
	26	,{
	27	name: "Label",
	28	width:20,
	29	//styles: "text-align:right;",
	30	field: "label"
	31	//formatter: phpr.grid.formatDate
	32	}
	33	,{
	34	name: "Abbrev.",
	35	width:5,
	36	//styles: "text-align:right;",
	37	field: "abbreviation"
	38	//formatter: phpr.grid.formatDate
	39	}
	40	]]
	41	}
	42	];
	43
	44
	45
	46
	47
	48	/**
	49	*
	50	* This class is NOT being used on the simple page, it does the sorting etc.
	51	*
	52	*/
	53	dojo.declare("DojoDataSortable", dojox.grid.data.DojoData, {
	54	// We need to extend this class, to add the sort functionality since
	55	// that is done by default in the client, but using the QueryReadStore
	56	// we intentionally want it to be done on the server.
	57	// So we also have to tell the client not to worry about sorting and
	58	// pass the data for sorting to the server. This is done in here.
	59	// Additionally we need to handle the "numRows" parameter that the
	60	// server sends, since we are paging the data and only the
	61	//
	62	// Thanks to Maine for the kick start on how to do it right: http://dojotoolkit.org/book/dojo-book-0-9-1-0/part-2-dijit-dojo-widget-library/advanced-editing-and-display/grid-1-0/sortin#comment-9112
	63
	64	// The number of items to load per request.
	65	// This is also the number of items (rows) initially shown.
	66	rowsPerPage:30,
	67	query:{name:"*"},
	68	// Explicitly tell the store that it must not sort the data on the client!
	69	clientSort:false,
	70
	71	requestRows: function(inRowIndex, inCount){
	72	// This entire method is copied from the class dojox.grid.data.DojoData
	73	// which is located in dojox/grid/_data/model.js
	74	// We ONLY ADDED the serverQuery-parameter in the array, since this
	75	// is the special part for the QueryReadStore.
	76	var row = inRowIndex \|\| 0;
	77	var params = {
	78	start: row,
	79	count: this.rowsPerPage,
	80	query: this.query,
	81	// The server knows how to handle those paramters, see the PHP script for that.
	82	serverQuery: dojo.mixin(
	83	{ start: row,
	84	count: this.rowsPerPage,
	85	sort:(this._sortColumn \|\| '')
	86	},
	87	this.query
	88	),
	89	sort: this.sortFields,
	90	queryOptions: this.queryOptions,
	91	onBegin: dojo.hitch(this, "beginReturn"),
	92	onComplete: dojo.hitch(this, "processRows"), // add to deferred?
	93	onError: dojo.hitch(this, "processError")
	94	};
	95	this.store.fetch(params);
	96	},
	97
	98
	99	canSort:function() {
	100	return true;
	101	},
	102
	103	sort:function(colIndex) {
	104	// clears old data to force loading of new, then requests new rows
	105	var name = this.fields.get(Math.abs(colIndex)-1).name;
	106	if (name) {
	107	this._sortColumn = (colIndex<0?'-':'')+name;
	108	// This clears the data and triggers the reload too.
	109	this.clearData();
	110	}
	111	},
	112
	113	setData: function(inData){
	114	// Edited not to reset the store, the parent implementation would
	115	// reset this.store, which we dont really want it to do here!
	116	this.data = [];
	117	this.allChange();
	118	}
	119	});

Download in other formats:

Original Format