Related sample: tutorial/quick_start/part3.html
Finally, we came to our last stage - server work.
In previous episodes we've created a simple contact book which supports a number of actions (adding, deleting). And there, we used data from external file names.xml.
The main purpose of this part of the tutorial is to show you how to use data from a database, how to work with server.
Our upgrades:
The main server assistant in DHTMLX Touch is DataProcessor.
So, our first step should be creating of dataprocessor for the grid. Grid's changes will be saved in the database as soon as you create dataprocessor for the grid. So, two last upgrades we can call finished.
var dp = new dhx.DataProcessor({ master:$$('grid'),//specifies a linked datasource url:"gridData.php"//defines the path to the file which will get change requests });
Next, we need to link our form with the grid. And the method bind() will help us there. Btw, filling will be performed automatically. So, we can remove a snippet that answers for form filling from the code- the function fill_form().
$$('topForm').bind('grid');
Then, we must add one more button to the form, by clicking which data changes will be saved. It'll be the button 'save'.
{ width: 340, view:"form",id:"topForm", elements:[{view:"text", id:"name", label: 'Name', labelPosition: "left", align: "center", labelAlign: "center"}, // the second column of the second row of the layout {view:"text", id:"email", label: 'email', labelPosition: "left", align: "center", labelAlign: "center"},// here we create form object and 3 its controls. {view:"button", label:"Save", click:"save_form"}] }
And specify the appropriate function for this button:
function save_form() { $$("topForm").save(); }
Ok, the assigned task was complited. As you can see, it's actually rather easy.
Related sample: tutorial/quick_start/part3.html
Part 2. Some actions ← Part 3. From client- to server-side