2.3_advanced_xtemplate_usage

最新推荐文章于 2021-08-05 15:00:54 发布

原创最新推荐文章于 2021-08-05 15:00:54 发布 · 129 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ext template

Ext 专栏收录该内容

9 篇文章

订阅专栏

本文演示了如何使用ExtJS XTemplate进行高级模板化的实现，通过实例展示了如何在数据对象中循环遍历并动态添加特定条件的元素。


<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>