ExtJS4 - Extending different components from a single base class

Question

I have a web app for which I am using ExtJS 4.2. This application has a bunch of different components - a panel that displays some data, another panel that displays some other data, a grid, a chart, etc, etc.

It's required that each component has at minimum a specific set of functions and properties. So I'd like to define a 'component' class that I can extend everything else from. For example:

Ext.define('MyApp.BaseComponent', {
    extend: 'Ext.panel.Panel',
    alias: 'widget.myapp-basecomponent',

    prop1: true,
    prop2: 17,

    func1: function (a, b) {
        return a + b;
    }
});

Then I would extend every individual component in my app from that base component class. The problem is that if I define the base component as extending 'Ext.panel.Panel', I can only extend other panels from it. I can't extend a grid, tree, etc, etc from it.

Is there a way I can accomplish this? Or am I approaching this the wrong way? Maybe I should just nest everything that's not a panel (grid, chart, etc) in a panel so they can all extend from BaseComponent? Advice greatly appreciated.

Answer 1

If you just want to augment the base component class, you could always just provide an override that adds them:

Ext.define('MyApp.AugmentComponent', {
    override: 'Ext.Component',

    a: 1,
    b: 2,

    fn1: function() {
    }
});