Index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <meta name = "viewport" content = "initial-scale = 1.0, maximum-scale = 1.0, user-scalable = no"> <link rel="stylesheet" href="../../../codebase/touchui.css" type="text/css" media="screen" charset="utf-8"> <script type="text/javascript" charset="utf-8"> DHTMLX_SKIN = "touch"; // specifies a type of the border </script> <script src="../../../codebase/touchui.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="groupBox" style="width:100%;height:100%"> </div> <script type="text/javascript" charset="utf-8"> dhx.ui({ container:"groupBox", type:"head", rows:[ // the first row of the layout where we specify toolbar { view:"toolbar", id:"Bar", type:"MainBar", data:[{type:"roundbutton", id:"add", name:"add", label:"Add", click:"add_row"},// in 'data' parameter we put controls' definitions {type:"roundbutton", id:"delete", name:"delete", label:"Delete", click:"delete_row"}] // in our case these are 2 round buttons }, {cols:[ // the second row we divide into 2 columns { width: 340, view:"form",id:"topForm", data:[{type:"text", id:"name", label: 'Name', position: "label-left", align: "center", labelAlign: "center"}, // the second column of the second row of the layout {type:"text", id:"email", label: 'email', position: "label-left", align: "center", labelAlign: "center"}]// here we create form object and 3 its controls. }, {id:"grid",view:"grid", header:true, //in the second column we create grid fields:[{ id:"Name", // 'fields' parameter lets to define grid cols width:170,// the width of the first grid col label:"Name",// the name of the first grid col template:"#name#" // 'template' specifies data which will be presented in the col }, { id:"email",// the second col of the grid width: 800, label:"email", template:"#email#" }], datatype:"xml", // the type of the data by which we will fill grid up url:"xml/names.xml" // the relative path to our xml file }, ] }] }) $$('grid').attachEvent("onAfterSelect", fill_form); function fill_form(id){ $$("topForm").setValues( $$("grid").item(id) ); } function add_row(id) { $$("grid").select($$("grid").add({})); } function delete_row() { var id=$$("grid").getSelected(); dhx.confirm({ title: "Delete", message: "Are you sure you want to delete the selected contact?", callback: function(result) { if (result) { $$("grid").remove(id); } } }); } </script> </body> </html>
names.xml
<?xml version="1.0" encoding="UTF-8"?> <data> <item id="1"> <name>Alex</name> <email> alex@br.aa </email> </item> <item id="2"> <name>Peter</name> <email> peter@dg.ee </email> </item> <item id="3"> <name>John</name> <email> john@ge.hh </email> </item> <item id="4"> <name>Ali</name> <email> ali@rt.ff </email> </item> </data>