2.3_advanced_xtemplate_usage

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ext JS in Action Chapter 02 |Listing 2.3 Advanced XTemplate usage</title>
<link rel="stylesheet" type="text/css" href="./ext3/resources/css/ext-all.css" />
<script type="text/javascript" src="./ext3/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="./ext3/ext-all-debug.js"></script>
<script type="text/javascript">
	Ext.BLANK_IMAGE_URL = './ext3/resources/images/default/s.gif'; 
</script>
<script type="text/javascript">

Ext.onReady(function() {
    /**
     * The purpose of this example is to demonstrate how to implement an Ext.XTemplate using inline methods.  This
     * implementation will loop through the cars array inside of each data object provided to the XTemplate.  The
     * nested if tag for the tpl element will execute the dynamically added isCamry method, which if true, will append
     * "(same car)" to the text on screen. 
     */
    var tplData = [{
        color : "#FFE9E9",
        name  : 'Naomi White',
        age   : 25,
        dob   : '03/17/84',
        cars  : ['Jetta', 'Camry', 'S2000', "M3"]
    },{
        color : "#E9E9FF",
        name : 'John Smith',
        age  : 20,
        dob  : '10/20/89',
        cars : ['Civic', 'Accord', 'Camry']
    }];

    var myTpl = new Ext.XTemplate(
        '<tpl for=".">',
            '<div style="background-color: {color}; margin: 10px;">',
                '<b> Name :</b> {name}<br />',
                '<b> Age :</b> {age}<br />',
                '<b> DOB :</b> {dob}<br />',
                '<b> Cars : </b>',
                 '<tpl for="cars">',
                    '{.}',
                    '<tpl if="this.isCamry(values)">',
                      '<b> (same car)</b>',
                    '</tpl>',
                    '{[ (xindex < xcount) ? ", " : "" ]}',
                '</tpl>',
                '<br />',
            '</div>',
         '</tpl>',
        {
           isCamry : function(car) {
               return car === 'Camry';
           }
        }
    );
    myTpl.compile();

    myTpl.append(document.body, tplData);


});
</script></head>
<body>

</body>
</html>

你可能感兴趣的:(ext template)