In a previous post (http://moduscreate.com/a-dive-into-the-sencha-class-config-system/) Stan explained the foundation of Sencha Config System and how the getters and setters work. In this post I'm going to explain the new Ext.Config.configs which have been added in versions 5.0 and 5.5, which you can find here http://docs.sencha.com/extjs/6.0.2-classic/Ext.Config.html
- Ext.Config.cached
According to Sencha docs the cached config when set as true the config property will be stored on the class prototype once the first instance has had a chance to process the default value. To test that I've created a Fiddle: https://fiddle.sencha.com/#fiddle/1cpj.
```javascript
config: {
foo: {
$value: 42,
cached: true
}
}
```
[gif]
In ExtJS you can find an implementation in Ext.util.ElementContainer.childEls config. Along the cached config in you can see also the other configs which I've explained below, except the evented. ```javascript childEls: { $value: {}, cached: true, lazy: true,
merge: function (newValue, oldValue, target, mixinClass) {
```
Checking for cached configs is easy by using the API of the Ext.Configurator class which is instantiated in the Ext.Base. Their reference is stored in the Ext.Configurator.cachedConfigs property (http://docs.sencha.com/extjs/6.0.2-classic/Ext.Configurator.html#property-cachedConfigs) which can be accessed trough the getConfigurator method:
myObj.getConfigurator().cachedConfigs- Ext.Config.evented
This one if set as true the config property will be treated as a Ext.Evented which means whenever the setter of this config will be called ExtJS automatically will fire for you an event configname + change. Fiddle here: https://fiddle.sencha.com/#fiddle/1cno
Ext.define('MyClass', {
mixins: ['Ext.mixin.Observable'],
config: {
foo: {
$value: 42,
evented: true
}
},
constructor: function(config) {
console.log('MyClass Instantiated');
this.initConfig(config);
this.mixins.observable.constructor.call(this, config);
return this;
}
});
myObj = new MyClass();
myObj.on('foochange', function() {
console.log(arguments);
});[gif]
- Ext.Config.lazy
Any lazy config if set as true the config property will not be immediately initialized during the initConfig call. Fiddle here https://fiddle.sencha.com/#fiddle/1c52, and the declaration is:
config: {
foo: {
$value: 42,
lazy: true
}
}[gif]
- Ext.Config.merge
Merge config accepts a function which will be called as instances provide values that need to be combined with inherited values. The returned value of the function will be the config value and on further calls that returned value will be provide as oldValue trough an argument
Ext.define('MyClass', {
config: {
foo: [42]
},
constructor: function(config) {
this.initConfig(config);
return this;
}
});
Ext.define('MyExtendedClass', {
extend: 'MyClass',
config: {
foo: {
$value: [23],
merge: function(newValue, oldValue) {
var val = [].concat(newValue, oldValue);
debugger;
return val;
}
}
}
});
myObj = new MyClass();
myExtendedObj = new MyExtendedClass();