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;
        }
    };

转载于:https://www.cnblogs.com/final-elysion/p/6114440.html