<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({ rows:[// to the first row we put toolbar with 2 buttons {view:"toolbar", type:"MainBar", data:[// the parameter 'data' specifies controls of the toolbar {type:"button", label:"Add", click:"add_item" }, {type:"button", label:"Remove", click:"remove_item" } ]}, { // to the second row we put list filled with data from file - 'data.php' view:"list", id:"mylist", url:"data.php", type:{ width:"auto", template:"#name#" }, select:true }, { // to the third row we put form with 3 text input fields and 1 button view:"form", id:"myform", data:[ { type:"text", label:"Name", id:"name"}, { type:"text", label:"Age", id:"age"}, { type:"text", label:"City", id:"city"}, { type:"button", label:"Save", click:"save_form"} ] } ] }); var dp = new dhx.DataProcessor({ master:$$('mylist'), url:"validate.php" }); dp.link($$('myform')); dp.attachEvent("onAfterInvalid", function(result){ dhx.notice(result.value); }); }); function add_item(){ $$('mylist').add({},1); }; function remove_item(){ $$('mylist').remove($$('mylist').getSelected()); }; function save_form() { this.save(); }; </script> </body> </html>