This page contains an example used GlobalStore class. Each code snippet is explained in detail what lets you to get the main information about the component.
2 tables (categories, products).
By choosing a category, get the appropriate products.
STEP 1. First of all, in addition to 'touchui.css' and 'touchui.js', attach 'globalstore.js' file
<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" />
STEP 2. Create GlobalStore objects
We will create 2 objects (as we have 2 tables):
products = new dhx.GlobalStore({}); products.load("products.xml"); categories = new dhx.GlobalStore({ link: [{ store: products, by: { id: "category_id" } }] }); categories.load("categories.xml");
The code snippet contains a number of unknown-to-you parameters. Let's rectify this:
STEP 3. Attach 2 grids where we will present data (one for 'categories' and the other for 'products')
categories_view = new dhtmlXDataView({ container: "categories_container", type:{ template:"<div>{obj.name}</div>", height:10, width: 150 }, datastore: categories.data }); 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 });
We added a new optional parameter to dhtmlXDataView constructor pursuing the main ui-library aim - simply building. DataView is rather often used for data presentation and a new parameter lets to load data directly to it.
The other parameters of dhtmlXDataView are the same. To know any details about them, please refer to here.
STEP 4. Attach event (it allows us to change the appropriate products by mouse click)
categories_view.attachEvent("onItemClick", function (id, ev, html){ categories.setCursor(id); return true; });
Here, we also face the novelty:
The goal is arrived at. The full code of the example you can see here