Class Config Defaults in Ext JS 4

The new class configuration methods in Ext4 seem great when reading about them, but if you actually tried you may have found yourself a little confused. Examples and documentation explain using the new default config property, initConfig, and callParent - however it isn't exactly clear how to get them to work together. Using the config property to create defaults when creating classes needs to be invoked with initConfig. Let's use the following example to create a custom window:

Ext.define('Ext.ux.CustomWindow',{
    extend: 'Ext.Window',
    alias: 'widget.customwindow',
    closeAction: 'hide',
    config: {
        height: 400,
        width: 300
    }
    constructor: function(config) {
        this.callParent(arguments);
        this.initConfig(config);
        return this;
    }
});

Let's explain. The read only properties are placed after extend and alias, followed by the config property that contains the defaults properties unless the user overrides them in their config when creating the object. Within the constructor you can manipulate config and properties before triggering the functions to actually create the object. First the parent's constructor must be overridden, second the default config must be applied with custom config, and lastly you should return this. Doing these in the correct order will ensure both user defined and default config is applied properly, along with properties of the parent class.