Index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html> <head> <link rel="stylesheet" href="../../../codebase/touchui.css" type="text/css" media="screen" charset="utf-8"> <script src="../../../codebase/touchui.js" type="text/javascript" charset="utf-8"></script> </head> <body> <script type="text/javascript" charset="utf-8"> dhx.ui({ rows:[ // the first row of the layout where we specify toolbar { view:"toolbar", type:"MainBar", data:[{type:"round_button", label:"Add"},// in 'data' parameter we put controls' definings {type:"round_button", label:"Delete"}] // here these are 2 round buttoms }, {cols:[ // the second row we divide into 2 columns {width: 260, id:"grid", view:"grid", header:true, //in the first column we create grid fields:[{ id:"Name", // 'fields' parameter lets to define grid cols width:110,// 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: 150, label:"email", template:"#email#" }], datatype:"xml", // the type of the data by which we will fill grid up url:"names.xml" // the relative path to the xml file }, { view:"form", id:"topForm", data:[{type:"text", label: 'Name', value: "Alex", position: "label-left", align: "center", labelAlign: "center"}, // the second column of the second row of the layout {type:"text", label: 'Surname', value: "Brryr", position: "label-left", align: "center", labelAlign: "center"}, // here we create form object and 3 its controls. {type:"text", label: 'Phone', value: "34873", position: "label-left", align: "center", labelAlign: "center"}] }] }] }) </script> </body> </html>
names.xml
<?xml version="1.0" encoding="UTF-8"?> <data> <item id="1"> <name>Alex</name> <surname> Brryr</surname> <phone> 34873</phone> <email> alex@br.aa </email> </item> <item id="2"> <name>Peter</name> <surname> Deghr </surname> <phone> 32452 </phone> <email> peter@dg.ee </email> </item> <item id="3"> <name>John</name> <surname> Gejuy </surname> <phone> 73452 </phone> <email> john@ge.hh </email> </item> <item id="4"> <name>Ali</name> <surname> Rtadr </surname> <phone> 84621 </phone> <email> ali@rt.ff </email> </item> </data>