Pass data to template : Template « Ext JS « JavaScript DHTML






  1. JavaScript DHTML
  2. Ext JS
  3. Template

Pass data to template

  


<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>

</head>
<body>
<script type="text/javascript">

Ext.onReady(function() {

    var myTpl = new Ext.Template(
        '<div style="background-color: {color}; margin: 10;">',
            '<b> Name :</b> {name}<br />',
            '<b> Age :</b> {age}<br />',
            '<b> DOB :</b> {dob}<br />',
        '</div>'
    );
    
    myTpl.compile();
    
    var doTplAppend = function(obj) {
        myTpl.append(document.body, obj);
    }
    
    doTplAppend({
        color : "red",
        name : 'Name',
        age  : 20,
        dob  : '10/20/2009'
    });
    

});
</script> 
<div id='div1'>asdf</div>
</body>
</html>








Related examples in the same category

1.Define template and pass in data
2.Compile template
3.Use Ext.Template to display table detail
4.Use tpl markup to extract data
5.Reference user data and apply to template
6.Define template data in an array
7.Declare template with field marker
8.Write template to a Panel and link with data
9.Define your panel to hold the template
10.Update template data
11.Use if statement in template