Extjs merge objects

Question

I have a super class in my application, that defines an object like this:

Ext.define('superclass', {
    myObject: {
        prop1: true,
        prop2: 200,
        ..
    }

and a child class that inherited the superclass above, that declares the same object:

Ext.define('childclass', {
    extend: 'superclass',

    myObject: {
        prop3: false,
        prop4: false,
        ..
    }

The problem is with that, the myObject in the child class has only the prop3 and prop4 properties.

I need that myObject ib child class has all prop1, prop2, prop3 and prop4 properties.

How can I do this ?

Answer 1

Extend the object in the constructor (or in initComponent if you extend Ext.Component):

Ext.define('childclass', {
    extend: 'superclass',

    constructor: function() {
        this.myObject = Ext.apply({}, this.myObject, {
            prop3: false,
            prop4: false
        });
        this.callParent(arguments);
    }
});

Demo.

Answer 2

Both of the provided answers will change the superclass prototype's myObject property as soon as a child class is constructed. This may not be what you want. I question why you are putting an object on the class prototype like this. It's generally not a good idea to do it. But if you really want to, you can do this

Ext.define('childclass', {
    extend: 'superclass',

    // I'm adding an empty object here so that myObject on the
    // prototype does not get overridden.
    myObject: Ext.merge({}, superclass.prototype.myObject, {
        prop3: false,
        prop4: false
    });

});