<!DOCTYPE HTML> <html> <head> <script src="../../../../codebase/touchui.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" href="../../../../codebase/touchui.css" type="text/css" charset="utf-8"> </head> <body> <script type="text/javascript" charset="utf-8"> dhx.ready(function(){ dhx.ui({ cols:[//specifies layout {//the first column rows:[// the first row of the column. We put there toolbar with a label and a button. {view:"toolbar", type:"MainBar", data:[{type:"label", label:"Master list"}] }, // the second row of the column. We put there list which will contain our letters. {view:"list", id:"mylist1", data:[{ name:"A"},{ name:"D"},{ name:"E"},{ name:"N"},{ name:"S"},{ name:"W"},{ name:"Z"}], select:true, type:{ width:"auto", template:"#name#" } }] }, {// the second column rows:[// again we put toolbar to the first row of the column. {view:"toolbar", type:"MainBar", data:[ {type:"label", label:"Child list"} ]}, {// to the second row of the column we put grid. Grid will take data by means of file - data.php view:"grid", id:"mylist2", fields:[// the parameter 'fields' specifies columns of the grid { id:"name", width:100, label:"Name" }, { id:"city", width:100, label:"City" }, { id:"sex", width:50, label:"Sex" } ], url:"data.php" }, {// and to the last, third row of the column we put form. view:"form", id:"myform", data:[// the parameter 'data' specifies controls of the form. In our case these are 3 text input fields. { type:"text", label:"Name", id:"name"}, { type:"text", label:"Age", id:"age"}, { type:"text", label:"City", id:"city"}] }] }] }); var dp = new dhx.DataProcessor({ master:$$('mylist1')// as you probably understood the parameter 'master' defines the appropriate datasource. }); var dp2 = new dhx.DataProcessor({ master:$$('mylist2') }); dp.link($$('mylist2'), function(master, linked){ //links list('Master list') with grid('Child list') return linked.name.indexOf(master.name) == 0; }); dp.link($$('myform'));// links grid('Child list') with form dp2.attachEvent("onCursorChange", function(){ $$('myform').save();// saves changes made in form in the datasource }); }); </script> </body> </html>