DHTMLX Touch documentation

Global Datastore Usage

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<script src="../../../codebase/globalstore.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../../codebase/touchui.js" type="text/javascript" charset="utf-8"></script>
	<link rel="STYLESHEET" type="text/css" href="../../../codebase/touchui.css" />
 
	<style>
		body {
			padding: 10px;
		}
		div#types_container {
			border: 1px solid #A4BED4;
			background-color: white;
			width: 170px;
			height: 400px;
			float: left;
			margin: 10px;
		}
 
		div#products_container {
			border: 1px solid #A4BED4;
			background-color: white;
			width: 541px;
			height: 400px;
			float: left;
			margin: 10px;
		}
 
		div.header {
			text-align: center;
			font-weight: bold;
			height: 26px;
			padding-top: 4px;
		}
 
		div.container {
			float: left;
		}
 
	</style>
 
	<script>
		var types;
		var products;
		window.onload = function() {
			products = new dhx.GlobalStore({
				fields: {
					field_a:{ type: "string", format:"$ #value#" },
					field_b:{ type: "date", format: "%d/%y/%m" }
				},
				userdata: {
					some: "value"
				}
			});
			products.load("01_products_connector.xml");
 
			types = new dhx.GlobalStore({
				link: [{
					store: products,
					by: { id: "type_id" }
				}],
				userdata: {
					some: "value"
				}
			});
			types.load("01_types_connector.xml");
 
			types_view = new dhtmlXDataView({
				container: "types_container",
				type:{
					template:"<div>{obj.name}</div>",
					height:10,
					width: 150
				},
				datastore: types.data
			});
			types_view.attachEvent("onItemClick", function (id, ev, html){
				types.setCursor(id);
				return true;
			});
 
			products_view = new dhtmlXDataView({
				container: "products_container",
				type:{
					template:"<div>{obj.name}</div><div>${obj.sale}</div><div>{obj.rating} stars</div>",
					height:44,
					width: 250
				},
				datastore: products.data
			});
	}
	</script>
	<body>
		<div class="container">
			<div class="header">Categories</div>
			<div id="types_container"></div>
		</div>
		<div class="container">
			<div class="header">Products</div>
			<div id="products_container"></div>
		</div>
	</body>
</html>