ExtJs XTemplate

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"
}]