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" } });
Constructor can have several link blocks that lets you to set a number of links you'd wish.
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" } });
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 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
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);
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.
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); });
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 } });
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.
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 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:
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)
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)
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"}])