XTemplate

Ext XTemplate的应用：

 

template.js

    Ext.onReady(function(){
    	
        //定义模板 使用标签tpl和操作符for
        var tpl1 = new Ext.XTemplate(
            '<table border=1 cellpadding=0 cellspacing = 0>',
            		'<tr><td colspan=2 align=center>For循环便利数据</td></tr>' ,
		            '<tr>',
		            	'<td width=90 >姓名</td>',
		            	'<td width=90 >年龄</td>',
		            '</tr>',
	            '<tpl for=".">',
		            '<tr>',
		            	'<td>{name}</td>',
		            	'<td>{age}</td>',
		            '</tr>',
	            '</tpl>',
            '</table>'
        );
        
        //通过自定义格式化函数解析json对象  {stature:this.parseJson()}
        var tpl2 = new Ext.Template(
            '<table border=1 cellpadding=0 cellspacing = 0>',
            	'<tr><td colspan=2 align=center>自定义解析json数据</td></tr>' ,
	            '<tr>',
	            	'<td width=90 >姓名</td>',
	            	'<td width=120>{name}</td>',
	            '</tr>',
	            '<tr>',
	            	'<td width=90 >年龄</td>',
	            	'<td width=120>{age}</td>',
	            '</tr>',
	            '<tr>',
	            	'<td width=90 >身高</td>',
	            	'<td width=120>{stature:this.parseJson()}</td>',
	            '</tr>',
            '</table>'
        );
        
        tpl2.parseJson = function(json){
            return json.num + json.unit;
        } ;
        
    //数组索引与简单数学运算 {#}    每一项都加上序号
     var tpl3 = new Ext.XTemplate(
         '<table border=1 cellpadding=0 cellspacing = 0>',
         		'<tr><td colspan=3 align=center>每一行上面加上序号</td></tr>' ,
		         '<tr>',
		         	'<td>序号</td><td width=90 >姓名</td><td width=90 >工资</td>',
		         '</tr>',
	         '<tpl for=".">',
	         	'<tr>'+
	         		'<td>{#}</td><td>{name}</td><td>{wage * .9}</td>',
	         	'</tr>',
	         '</tpl>',
         '</table>'
     );
    
     //自动渲染简单数组  使用特殊变量{.}可循环输出
     var tpl4 = new Ext.XTemplate(
         '<table border=1 cellpadding=0 cellspacing = 0>',
         		'<tr><td colspan=2 align=center>自动渲染简单数组</td></tr>' ,
	            '<tr>',
	            	'<td>序号</td><td width=90 >姓名</td>',
	            '</tr>',
            '<tpl for=".">',
            	'<tr>',
            		'<td>{#}</td><td>{.}</td>',
            	'</tr>',
            '</tpl>',
        '</table>'
     );
     
     //基本的条件逻辑判断  这没有else的操作符 如需要，就要写两个逻辑相反的if的语句
     //输出工资大于1000的员工信息 工资 * 0.9
     var tpl5 = new Ext.XTemplate(
         '<table border=1 cellpadding=0 cellspacing = 0>',
         		'<tr><td colspan=3 align=center>逻辑判断</td></tr>' ,
	         	'<tr>',
	         		'<td>序号</td><td width=90 >姓名</td><td width=90 >工资</td>',
	         	'</tr>',
	         '<tpl for=".">',
	         	'<tpl if="wage &gt; 1000">',
	         		'<tr>',
	         			'<td>{#}</td><td>{name}</td><td>{wage * .9}</td>',
	         		'</tr>',
	         	'</tpl>',
	         '</tpl>',
         '</table>'
     );
     
         //定义组合框模板  xindex：若是循环模板，这是当前循环的索引index（从1开始）。
         //values：当前作用域下的值    
        var itemTpl = new Ext.XTemplate(
            '<tpl for=".">',
	            '<div class="x-combo-list-item {[xindex % 2 == 0 ? "even" : "odd"]}">',
	            '{#} ：{[this.check(values)]}</div>',
            '</tpl>',
            {
                check : function (values) {
                    if(values.value > 2 ){
                        return "<font color=red>"+values.item+"</font>";
                    }else {
                        return "<font color=blue>"+values.item+"</font>";
                    }
                }
            }
        ) ;
        new Ext.form.FormPanel({
            applyTo :'target',
            title:'在Extjs组件中使用模板',
            labelSeparator :'：',//分隔符
            height : 100,
            frame : true,
            width : 350,
            items : [
                new Ext.form.ComboBox({
                    fieldLabel:'combo',
                    displayField:'item',
                    valueField:'value',
                    tpl : itemTpl,//引入自定义模板
                    editable : false,
                    mode: 'local',
                    triggerAction: 'all',
                    store : new Ext.data.SimpleStore({
                        fields: ['item','value'],
                        data : [['条目1',1],['条目2',2],['条目3',3],
                                ['条目4',4],['条目5',5],['条目6',6]]
                    })
                })
            ]
        });
     
    
        var productTpl = new Ext.XTemplate(
            '<tr><td>{0}</td><td>{1}</td><td>{2}</td></tr>'
        );
        Ext.get('addProduct').on('click',function(){
            var pname = Ext.get('productName').getValue();
            var pnum = Ext.get('productNum').getValue();
            var pprice = Ext.get('productPrice').getValue();
            productTpl.append('product-table',[pname,pnum,pprice]);
        });
     
     //定义模板数据
        var data1 = [
            {name:'张三',age:20},
            {name:'李四',age:25},
            {name:'王五',age:27},
            {name:'赵六',age:26}
        ];
        
        var data2 = {
            name : 'tom',
            age : 24,
            stature : {
                num : 170,
                unit : '厘米'
            }
        };
        
        var data3= [
                {name : '张三',wage : 1000},
                {name : '李四',wage : 1200},
                {name : '王五',wage : 900},
                {name : '赵六',wage : 1500}
            ];
        
        var data4 = ['张三','李四','王五','赵六'];
        
        
        //模板值和模板进行组合并将新生成的节点插入到id为'tpl-table'的元素中
        tpl1.append('tpl-1',data1);
        tpl2.append('tpl-2',data2);
        tpl3.append('tpl-3',data3);
        tpl4.append('tpl-4',data4);
        tpl5.append('tpl-5',data3);
    });

 

 

template.html

<body>
	<div id='tpl-1'></div>
    <br>
    <div id="tpl-2"></div>
    <br>
    <div id="tpl-3"></div>
    <br>
    <div id="tpl-4"></div>
    <br>
    <div id="tpl-5"></div>
    <br>
    <div id="target"></div>
    <br>
    产品名称：<input type="text" id="productName"><br>
    产品数量：<input type="text" id="productNum"><br>
    产品价格：<input type="text" id="productPrice">
    <input type="button" value="增加产品" id='addProduct'>
    <table id='product-table' border=1 cellspacing=0 cellpadding=0>
        <tr>
            <td width=160>产品名称</td><td width=75>数量</td><td width=75>金额</td>
        </tr>
    </table>
</body>