Loading Example

<!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>