I'm building an application with ExtJS 6. I've already read the guides, tutorials and best practice tips. But what I dont understand yet is, why should I use the config object?

With config:

Ext.define('MyProject.foo.Bar', {
    extends: 'Ext.window.Window',

    ...

    config: {
        title: 'My title'
    }
});

Without config:

Ext.define('MyProject.foo.Bar', {
    extends: 'Ext.window.Window',

    ...

    title: 'My title'
});

Both are working as expected. Can anyone tell me the difference and possible benefits?

I'm building an application with ExtJS 6. I've already read the guides, tutorials and best practice tips. But what I dont understand yet is, why should I use the config object?

With config:

Ext.define('MyProject.foo.Bar', {
    extends: 'Ext.window.Window',

    ...

    config: {
        title: 'My title'
    }
});

Without config:

Ext.define('MyProject.foo.Bar', {
    extends: 'Ext.window.Window',

    ...

    title: 'My title'
});

Both are working as expected. Can anyone tell me the difference and possible benefits?

• javascript
• extjs
• extjs6

1 Answer 1

It's all described in the Class System guide:

• Configurations are pletely encapsulated from other class members
• Getter and setter methods for every config property are automatically generated into the class prototype during class creation if methods are not already defined.
• The auto-generated setter method calls the apply method (if defined on the class) internally before setting the value. You may override the apply method for a config property if you need to run custom logic before setting the value. If your apply method does not return a value, the setter will not set the value. The update method (if defined) will also be called when a different value is set. Both the apply and update methods are passed the new value and the old value as params.