git.roojs.org Git - roojs1/blob - examples/view/domtemplate.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   2 <html>
   3 <head>
   4     <link rel="stylesheet" type="text/css" href="../../cssX/roojs-all.css"/>
   5     <link rel="stylesheet" type="text/css" href="../../cssX/xtheme-slate.css"/>
   6
   7     <script type="text/javascript" src="../../roojs-all.js"></script>
   8     <script type="text/javascript" src="../../Roo/DomTemplate.js"></script>
   9
  10
  11 <script id="javascript-code" type="text/javascript">
  12 tpl = new Roo.DomTemplate({
  13    url : 'domtemplate_snippet.html'
  14 });
  15 Roo.onReady((function() {
  16
  17     var html = Roo.get('body').dom.innerHTML;
  18     Roo.get('body').dom.innerHTML = '';
  19     Roo.debug = 1;
  20
  21     // nice and global to test with..
  22
  23     Roo.log(tpl);
  24     var data =   [
  25             {
  26                 ontable : 'mtrack_ticket',
  27                 changedate : new Date() ,
  28                 reason : 'helo',
  29                 person_id_name : 'test',
  30                 object_summary : 'summary'
  31             },
  32             {
  33                 ontable : 'mtrack_repos',
  34                 changedate : new Date()
  35             }
  36         ];
  37     Roo.each(data,  function(r) {
  38         // loops through data and appends rows..
  39
  40         tpl.append(Roo.get('body'), r);
  41     });
  42
  43     Roo.get('template-show').update(Roo.util.Format.htmlEncode(tpl.html));
  44     Roo.get('javascript-show').update(Roo.util.Format.htmlEncode(
  45         Roo.get('javascript-code').dom.innerHTML
  46     ));
  47
  48
  49 }).defer(1000));
  50
  51
  52 </script>
  53
  54 </head>
  55 <body>
  56     <H1>Dom Template example</H1>
  57     <div id="body">
  58
  59
  60     </div>
  61
  62
  63     <h3>Javascript code</h3>
  64     <PRE id="javascript-show"></PRE>
  65     <h3>Template code</h3>
  66
  67     <PRE id="template-show"></PRE>
  68
  69 </body>
  70 </html>