Write template to a Panel and link with data : Template « Ext JS « JavaScript DHTML






  1. JavaScript DHTML
  2. Ext JS
  3. Template

Write template to a Panel and link with data

   

<!--
/*!
 * Ext JS Library 3.0.0
 * Copyright(c) 2006-2009 Ext JS, LLC
 * licensing@extjs.com
 * http://www.extjs.com/license
 */
-->
<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>
<!-- Revised from demo code from ext3.0.0 -->
<script type="text/javascript">
Ext.onReady(function() {
    var data = {
        name: 'A',
        company: 'B',
        city: 'D',
        state: 'E'
    };

    var p = new Ext.Panel({
        title: 'Title',
        width: 300,
        html: 'html code <B>here</B>',
        tbar: [{
            text: 'Template',
            handler: function(){
                var tpl = new Ext.Template(
                    'Name: {name}',
                    'Company: {company}',
                    'Location: {city}, {state}'
                );
                tpl.overwrite(p.body, data);
                p.body.highlight('#00ff00', {block:true});
            }
        }],

        renderTo: Ext.getBody()
    });


});
</script> 



</body>
</html>








Related examples in the same category

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