Ext template 的使用

Ext template 的使用

	Ext.define('app.view.MyDataView', {
	    extend: 'Ext.panel.Panel',
	    xtype: 'myDataView',
		border:true,
		scrollable:true,
		cls:'my-data-view',
		minHeight:200,
		maxHeight:400,
	    initComponent: function() {
			var me = this;
			this.tpl = app.templates.myTpl();
			this.callParent(arguments);
	    },
	    loadData: function(data) {
	        this.update(data)
	    },

	    clearData: function()
	    {
	        this.update([]);
	    }
	});

	app.templates = {
	    myTpl: function(){
	        var t = this.myTplCache;
	        if (t) return t;

	        this.myTplCache = new Ext.XTemplate(
                '<tbody>',
	                '<tpl for=".">',
                	 '<table style="padding-bottom: 10px;">',
	                	'<tpl if="myCode">',
		                	'<tr>',
		                        '<td class="tpl-cd"><span class="tpl-label">Code#:</span> {myCode}</td>',
		                    '</tr>',
	                    '</tpl>',
		                    '<tr>',
		                        '<td class="tpl-desc"><span class="tpl-label">Description:</span>{desc0:this.trimValue}</td>',
		                    '</tr>',
	                  '</table>',
	                '</tpl>',
                '</tbody>',
	            {
	                trimValue: function(v) {
	                    return v.replace(/\s/g, "");
	                }
	            }
	        );
	        return this.myTplCache;
	    }
	};