ExtJs 3.4 作用定制化的模板
Ext.ux.TemplateRenderer = function(config) { Ext.apply(this, config); if (typeof this.template == 'string') { this.template = new Ext.XTemplate(this.template); } Ext.ux.TemplateRenderer.superclass.constructor.call(this); } Ext.extend(Ext.ux.TemplateRenderer, Ext.Updater.BasicRenderer, { render : function(el, response, updateManager, callback) { var data = Ext.util.JSON.decode(response.responseText); this.template.overwrite(el, data); if (typeof callback == 'function') { callback(); } } });
//以上是定制的内容 var tempStr = '<tpl for=".">' + '<div>xxx:{number_plate}</div>' + '<div>xxx:{agencyname}</div>' + '<div>xxx:{vehicle_use}</div>' + '<div>xxx:{call_letter}</div>' + '<div>xxx:{use_date}</div>' + '<div>xxx:{mnt_time}</div>' + '<div>xxx:{contact}</div>' + '<div>xxx:{contactmobile}</div>' + '<div>xxx:{contacttitle}</div>' + '<div>xxx:{fuelconsumption}</div>' + '<div>xxx:{gpstime}</div>' + '<div>xxx:{potyearcheck_date}</div>' +'<hr size="1"/>' +'</tpl>';
//使用load方法,异步读取数据,渲染到panel,
this.centerPanel.load({ url : 'urlPath', discardUrl : false, nocache : true, params : { type : 'userInfo' }, text : '加载中...', callback : function(a, b, req) { } }); } this.centerPanel = new Ext.Panel({ id : 'infoPanel', layout : 'fit', autoScroll : true, border : false, bodyStyle : 'padding:5px 5px 0 10px', listeners : { render : function(c) { c.getUpdater() .setRenderer(new Ext.ux.TemplateRenderer({ template : tempStr })); } } });
鉴于templateStr中用到了for="." , 要求返回的数据是数据类型,以下可以是load返回的数据
[{
"contacttitle":"xxxx", "gpstime":"xxxx", "fuelconsumption":"xxxx", "contactmobile":"xxxx", "use_date":"xxxx", "mnt_time":"xxxx", "agencyname":"xxxx", "vehicle_use":"xxxx", "number_plate":"xxxx", "potyearcheck_date":"xxxx", "call_letter":"xxxx", "contact":"xxxx" }]