0

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.

zeke
  • 3,603
  • 2
  • 26
  • 41

1 Answers1

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() {
    }
});
Evan Trimboli
  • 29,900
  • 6
  • 45
  • 66
  • Don't really want to do that... don't need those properties and functions for every little component in my app. – zeke Nov 15 '13 at 22:22
  • If you don't call them, what does it matter? – Evan Trimboli Nov 15 '13 at 23:34
  • Just seems kinda wrong to me... there wouldn't be any ill effects from having every single button, text field, etc inherit a bunch of useless properties and functions? – zeke Nov 16 '13 at 00:11
  • Nope, they will go on the prototype. – Evan Trimboli Nov 16 '13 at 00:13
  • The only other reasonable way to do it would be to create your own extensions for each class (component, container, panel, grid, chart) and then mixin your overrides. – Evan Trimboli Nov 16 '13 at 00:14
  • Thanks for the solution. I ended up nesting my grid/chart/etc components in panels and then just extending Ext.panel.Panel. – zeke Nov 21 '13 at 20:54