Extjs Ext.XTemplate 使用

xtype:'dataview',
autoScroll:true,
store:Ext.create('Ext.data.Store', {
	model:'App.models.student.PracticeSummaryModel',
	proxy: {
		type: 'ajax',
		url: '',
        reader: {
            type: 'json',
            root: 'data'
        },
        actionMethods : {
        	reader : 'POST'
        }
   },
   autoLoad: true
}),
tpl:new Ext.XTemplate(
    '<tpl for=".">',
    	'<tpl if="this.isWeekSummary(values.F_SX)">',
	        '<div style="width:100%;">',
	          '<div style="width:100%;font-size:16px;text-align:center;font-weight: bold;" >-- 周记: {[this.dateRender(values.F_KSSJ)]} 至 {[this.dateRender(values.F_JSSJ)]} --</div>',
	          '<div style="width:100%;font-size:14px;"><b>周记内容:</b>{F_ZJ}</div>',
	          '<div style="width:100%;font-size:14px;"><b>老师批注:</b>{F_BZ} 批阅时间:{[this.dateRender(values.F_PYSJ)]}</div>',
	          '<br/><br/>',
	        '</div>',
	    '<tpl else>',
	    	'<div style="width:100%;">',
	          '<div style="width:100%;font-size:16px;text-align:center;font-weight: bold;" >-- 年度实习总结 --</div>',
	          '<div style="width:100%;font-size:14px;"><b>总结内容:</b>{F_ZJ}</div>',
	          '<div style="width:100%;font-size:14px;"><b>老师批注:</b>{F_BZ} <b>批阅时间:</b>{[this.dateRender(values.F_PYSJ)]}</div>',
	          '<br/><br/>',
	        '</div>',
	    '</tpl>',
    '</tpl>',
    {
    	// 对时间格式化 renderer,调用方法如上,需要把代码放到 {[]} 中,并且,参数需要从 values 中获取
	    dateRender:function(v){
	    	return Ext.Date.format(v, 'Y-m-d');
	    },
	    isWeekSummary:function(v){
	    	return v === 'W';
	    }
    }
)

 

发表评论