Ext inheritance - unable to get a static value from a base/abstract class

Question

I have here two classes, Shape and Rectangle - where Rectangle inherits from Shape.
Here is the parent class:

Ext.define('Shape', {
    id: 1,
    name: 'ShapeX',
    static: {
        drawnShapes: ['Shape1', 'shape2'],
        getDrawnShapesCount: function () {
            console.log('the number of drawn shapes is :' 
                       + this.drawnShapes.length );
        }
    },
    draw: function (newShape) {
        debugger;
        var newShape;
        this.static.drawnShapes.push(newShape);
        console.log( newShape 
                   + ' is drawn.... \n the number of drawnShapes is ' 
                   + this.static.drawnShapes.length 
                   + '" \n Shape class defined!' );
    }
});

This is my class which inherits from the parent:

Ext.define('Rectangle', {
    extend: 'Shape',
    draw: function (Arrlenght,base.newShape) {
        var Arrlenght = inheritableStatics.drawnShapes.length;
        alert(Arrlenght); // I need this array value?

        if (Arrlenght <= 10) {
            this.callParent();
        } else {
            console.log('Too many shapes drawn!');
        }
        console.log('Drawing a Rectangle...');
    }
});

My problem is in the Rectangle class inside the draw method - I want to get the length of the drawShapes array from the parent class - then if the length is <= 10 call the parent which will add the new shape, otherwise return the message: "Too many shapes drawn!" .

How do I reference the static array?

Answer 1

Two mistakes to start with:

• static should be statics (plural) - not that you need it because...
• inheritableStatics is a configuration property rather than a run-time accessor which should be defined on Shape if you want to utilise these variables in sub-classes.

Ext.define('Shape', {
    // ...
    inheritableStatics: {
        drawnShapes: ['Shape1', 'Shape2']
    }
});

Then if you want to refer to static variables, you can use the self property which exists on every object instance - which is basically a reference to it's prototype / class:

Ext.define('Rectangle', {
    extend: 'Shape',
    // ...
    draw: function(/* args */){
        console.log(this.self.drawnShapes); // do stuff
    }
});