DHTMLX Touch documentation

GlobalStore usage & implementation

Object constuctor

Constructor, or initialization code, is used to create an object, to set its initial parameters. For GlobalStore it has the following form:

var GlobalVar = new dhx.GlobalStore({
	                   fields: {
	                      field_a:{ type: "string", format:"$ #value#" },
	                      field_b:{ type: "date", format: "%d/%y/%m" }
	                   },
                           link: [{
                              store: products,
                              by: { id: "category_id" }
                           }],
	                   userdata: {
	                      some: "value"
	                   }
});
  • fields - defines how data from selected fieds will be presented (parameter is into development now)
    • field_a, field_b - the fields' names (the same as in the table)
      • type - sets data type
      • format - sets format of data presentation
  • link - sets a link between 2 GlobalStore objects (dependence of one table on the other )
    • store - a dependent GlobalStore object (the name of the table)
    • by - a criteria by which data will be filtered
  • userdata - user infomation that can be passed with table's data (parameter is into development now)
    • some - the name of the user information (the name of the tag)

Constructor can have several link blocks that lets you to set a number of links you'd wish.

Objects linking

There are 2 ways to link data stores: set link straight in object constuctor (see above) or by using addSlave() method.
Let's know details of the second variant.

In simple way we use two GlobalStore objects:

var master = new dhx.GlobalStore({});
master.load("01_master_connector.php");
 
var slave = new dhx.GlobalStore({});
slave.load("01_slave_connector.php");
 
master.addSlave({
	datastore: slave, 
	links: 
        {       master: "id", 
		slave: "master_id" 
	}
});
  • master - a GlobalStore object of the main data store
  • slave - a GlobalStore object of the dependent data store
  • datastore - a GlobalStore object of the dependent data store
  • links - creates a link between stores
    • master - the name of the main data store's field by which stores will be linked
    • slave - the name of the dependent data store's field by which stores will be linked

addSlave() also allows to add several links:

master.addSlave({
	datastore: slave, 
	links: [
                    { master: "master_prop1", slave: "slave_prop1" },
                    { master: "master_prop2", slave: "slave_prop2" }
        ]
});

Every GlobalStore object can be both master and slave at the same time. So, addSlave() method lets you create multilevel depending system.

Server-side filter

Server-side filter is a useful thing for dynamic data loading. When you deal with a lot of data but don't need all of them you can use server-side filtration. For example, you want to shorten data loading and decide to load just the data that will be visible in container. You'll get less data in container but before this, you load and filter all of them on client-side. Loading time is the same. Server-side filtration helps to solve a problem. Data is filtered on server and you are left to load just a little part of data: just what you want.

slave.define("serverFilter", true);

It can be used just for dependent data stores (slaves).
Related event-onBeforeServerFilter

Getting/Setting cursor

GlobalStore cursor - it's an id of the datastore item, which is selected at the current moment. You can both set and get it.

setCursor() method is used to set a cursor.

master.setCursor(id);
  • id - id of the item you want to set as selected.

After you set a cursor, dependent datastores will be refiltered if it's necessary.
getCursor() method is used to get a cursor.

var cursor = master.getCursor();

The method returns id of the currently selected item.

Events

There are 3 GlobalStore-related events: onCursorChanged, onAfterFilter and onBeforeServerFilter.

onCursorChanged event occurs after changing the current cursor:

master.attachEvent("onCursorChanged", function(new_id) {
     alert(new_id);
});

onAfterFilter event occurs after filtering the GlobalStore object:

slave.attachEvent("onAfterFilter", function() {
     alert("globalstore filtered");
});

onBeforeServerFilter event occurs before server-side filtration:

slave.attachEvent("onBeforeServerFilter", function(params) {
alert(params.category_id);
});

Integration with DHTMLX components

dhtmlxDataView

You can load data of GlobalStore object to dhtmlxDataView directly, by means of a new parameter of dhtmlXDataView constructor (datastore). Everything else in dhtmlXDataView constructor leaves the same.

var master = new dhx.GlobalStore();
master.load("01_master_connector.php");
var data = new dhtmlXDataView({
	container: "products_container",
	datastore: master.data,
	type:{
		template:"<div>{obj.name}</div><div>${obj.sale}</div><div>{obj.rating} stars</div>",
		height:44,
		width: 250
	}
});
dhtmlxGrid

You can load data of GlobalStore object to dhtmlxGrid as well. In this case the method linkGrid() will be used 'to link' GlobalStore object with the component. Any dhtmlXGrid details you can get here.

products = new dhx.dhtmlxGlobalStore({});
products.load("products_connector.php");
var mygrid = new dhtmlXGridObject('grid_container');
mygrid.setImagePath("codebase/imgs/");
mygrid.setHeader("Id,Name,Sale,Rating,In store,Category");
mygrid.setSkin("dhx_skyblue");
mygrid.init();
products.linkGrid(mygrid);

Please note, here we use dhtmlxGlobalStore object but not GlobalStore. Details of dhtmlxGlobalStore class see below.

dhtmlxForm

For loading GlobalStore data to dhtmlxForm, you need just the linkForm() method. Any dhtmlxForm details you can get here.

products = new dhx.dhtmlxGlobalStore({});
products.load("products_connector.php");
var form = new dhtmlXForm("myform", formData);
products.linkForm(form);

Please note, here we use dhtmlxGlobalStore object but not GlobalStore. Details of dhtmlxGlobalStore class see below.

dhtmlxGlobalStore

dhtmlxGlobalStore is a derived class of GlobalStore (the same GlobalStore but with a little wide functionality).
Extra possibilities of dhtmlxGlobalStore consist in the methods that lets to 'link' GlobalStore object with dhtmlxgrid and dhtmlxform:

  • linkGrid(grid, scheme)
  • linkForm(from, scheme)

Please note, to use dhtmlxGlobalStore you need to attach one more file to the page:

<script src="codebase/dhtmlxglobalstore.js" type="text/javascript" charset="utf-8"></script>

linkGrid(grid, scheme) details.

linkGrid (grid, scheme)
  • grid - the name of the dhtmlxGrid object
  • scheme - a parameter which lets you select the colomns that will be in the grid, manage their order.

For example, we loaded to the dhtmlxGlobalStore data that contains the following columns: id, name, sale, rating, type_id.
But we'd like to show in the grid just 3 of them and in another order: sale, rating, someColumn, name (SomeColumn is a column we'd like to leave empty).
In this situation, loadGrid() will have the next view:

linkGrid (myGrid, "sale,rating,,name")
//or
linkGrid (myGrid, ["sale","rating",null,"name"])

linkForm(form, scheme) details.

linkForm (form, scheme)
  • form - the name of the dhmlxForm object
  • scheme - a parameter which lets you specify which data the form's controls will contain.

For example, we loaded to the dhtmlxGlobalStore data that contains the following columns: first_name, last_name, email, cell, skype.
In the form's text boxes (their ids are textBox1 and textBox2) we'd like to show just first name and email.
In this situation, loadForm() will have the next view:

linkGForm (myForm, [{ form: "textBox1", store: "first_name" }, { form: "textBox2", store: "email"}])