Ext4 added several new features to its class system that help make large JS code bases more maintainable. One of my favorite new features is the initConfig method. initConfig is an easy way to set a component’s default configuration and automatically create getters and setters at the same time.

Ext.define('My.custom.MyClass', {
    /** Default config values */
    config: {
        foo: false,
        bar: false,
        foobarred: false
    constructor: function(config) {
     * This method is called when setFoobarred is called.
     * Define an apply method when the mutator method needs to be customized.
    applyFoobarred: function(newValue, oldValue) {
        this.foobarred = newValue;
        if (newValue) {
            alert("You're foobarred");
// Ext.create instantiates an object
var obj = Ext.create('My.custom.MyClass', {bar: true});
// accessor methods are created automatically
console.log(obj.getFoo()); // false
console.log(obj.getBar()); // true
console.log(obj.getFoo()); // true
// reset method resets a value to its default
console.log(obj.getFoo()); // false
// apply method is called when set is called
obj.setFoobarred(true); // alert("You're foobarred!");

initConfig is a helpful tool for writing classes, but there are a couple of additional features I’d like to see Sencha support in the future:

  • Config attributes are not inherited, which is very annoying. All parent config attributes must be redefined in sub-classes.
  • Attributes defined in the config object are accessible outside of the accessor methods. It would be nice if the underlying object attributes were renamed with a leading underscore to make them psuedo private.
  • I wish there was a way to specify that the mutator method should not be created, so that config attributes could be psuedo immutable after object creation.

Request a Call

Looking for support?

Send Us Your Feedback

Provide us with some information about yourself and we'll be in touch soon. * Required Field