Basic renderTpl approach for sections of the overview panel

OverviewSection.js

/**
 *
 */
Ext.define('Oxford.view.base.OverviewSection', {
    extend: 'Ext.Component',

    /**
     * @cfg {String} sectionName
     */
    sectionName: 'Section',
    /**
     * @cfg {Boolean} hasFlyout
     */
    hasFlyout: false,
    /**
     * @cfg {Boolean} editableFlyout
     */
    editableFlyout: false,
    /**
     * @cfg {String} flyoutCls
     */
    flyoutCls: undefined,
    /**
     * @cfg {Array} fields
     */
    fields: [],
    
    renderTpl: [
        '<div class="overview-section">',
            '<div class="title"><span>{sectionName}</span>',
                '<tpl if="hasFlyout">',
                    '<a class="popover {flyoutCls}">{[values.editableFlyout ? "View/Edit" : "View"]}</a>',
                '</tpl>',
            '</div>',
            '<tpl for="fields">',
                '<div class="field-label">{name}</div>',
                '<div id="{[parent.id]}-{name}" class="field-value {cls}"></div>',
            '</tpl>',
        '</div>'
    ],

    initComponent: function() {
        //Setup the childEls based on all of the configured fields
        var i, len, childEls = [], fields = this.fields;
        for (i=0, len=fields.length; i<len; i++) {
            childEls.push(fields[i].name);
        }
        this.childEls = childEls;
        
        this.callParent();
    },

    beforeRender: function() {
        this.callParent();
        
        Ext.applyIf(this.renderData, this.getTemplateArgs());
    },

    getTemplateArgs: function() {
        return {
            sectionName: this.sectionName,
            hasFlyout: this.hasFlyout,
            editableFlyout: this.editableFlyout,
            flyoutCls: this.flyoutCls,
            fields: this.fields
        };
    },

    /*
     * Based on a new model, update each of the corresponding fields configured for this class.
     */
    update: function(model) {
        var i, len, fieldName, renderer, value,
            childEls = this.childEls,
            fields = this.fields;
            
        for (i=0, len=childEls.length; i<len; i++) {
            fieldName = childEls[i];
            value = model.data[fieldName];
            
            //If there's a renderer defined for this field, use it
            renderer = fields[i].renderer;
            if (renderer) {
                value = renderer(value, model);
            }
            
            this[fieldName].setHTML(value);
        }
    }
});