ExtendingComponents

[[TOC]]

Extending Server Components

The easiest way to extend server components is to use a war overlay and to subclass the component overriding the @UrlBinding and any method that you see fit.

Extending Client Components

Don't forget to add or modify your components.json and manifest file.

Tips and Tricks

Sprite

If you want to use the original sprite images of a component (buuton) you can override the getBaseClass() function of Component.js to return the name of the class you are extending (instead of the classname). For example, extending the Edit component:

/**
 * My Edit component
 * @author mprins
 */
Ext.define("viewer.components.MyEdit", {
    extend: "viewer.components.Edit",
    /** my (cached) workflow status. */
    status: null,
    /**
     * Create our component.
     * @constructor
     * @param {Object} conf configuration data object
     * @returns {viewer.components.MyEdit}
     */
    constructor: function (conf) {
        viewer.components.MyEdit.superclass.constructor.call(this, conf);
    },
    /**
     * (force) set workflow status on the feature before trying to save.
     * @override
     * @return the changed feature
     */
    changeFeatureBeforeSave: function (feature) {
        if (this.status === null) {
            // lookup and cache the workflow status
            var store = Ext.data.StoreManager.lookup('MyWorkflowStore');
            this.status = store.getById(this.config.workflowstatus);
        }
        feature.workflow_status = this.status.getId();
        return feature;
    },
    /**
     * Return the name of the superclass to inherit the css property.
     * @returns {String} base class name
     * @override
     */
    getBaseClass: function () {
        return this.superclass.self.getName().replace(/\./g, '');
    }
});