DHTMLX Touch documentation

GlobalStore usage & implementation

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.

Initial data

2 tables (categories, products).

The Goal

By choosing a category, get the appropriate products.

Implementation

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):

  • categories - main datastore
  • products - dependend datastore
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:

  • link - sets a link between 2 GlobalStore objects
    • store - a dependent GlobalStore object
    • by - a criteria by which data will be filtered
      Products' records will be filtered by the appropriate category (field - 'category_id').
  • load() - lets to load data.
    In our example we use xml file, not database. So we needn't to use dhtmlxConnector.

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:

  • SetCursor() - sets datastore item by the specified id. An item, which id you set, will be selected.

The goal is arrived at. The full code of the example you can see here