<!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>