View Full Version : What is best practice for default initialization of arrays in configs?

27 Mar 2012, 6:52 AM
I have several objects where my config includes array values. I am trying to determine what the best practice is for setting default values for these arrays.

What makes it a bit tricky is that if you set the array value in the class'es 'config' object, then that array object will be referenced by all instances of the class that are created (if they don't override the default).

My original plan was to set the defaults to 'null' and then detect this in the applyXxx() hook for the parameter. Unfortunately this is not working because the apply hook doesn't get called if the value is initialized to null.

What is the best practice for doing this?

Here is a piece of sample code that shows the way I had hoped to do it and the result. It also demonstrates how configuring it with an empty array causes the array to get shared.

The output I see from running the application is:

Touch version: 2.0.0
OS: Linux
Browser: Chrome 17.0.963.79
create with no config options
applyBoolVal called: value: true
array Value: null
create with values for both.
applyBoolVal called: value: false
applyArrayVal called: value: 1,2
Array Value: 1,2
---------[ Demonstrate Shared ]-----------
applyBoolVal called: value: true
Obj1 Initial Value:
applyBoolVal called: value: true
Obj2 Initial Value: A

<!doctype html>
<title>Empty List Init (look at console)</title>
<link rel="stylesheet" href="../../resources/css/app.css" type="text/css"/>
<script type="text/javascript" src="../../deps/sencha_touch/builds/sencha-touch-all-compat.js"></script>
<script type="text/javascript">

Ext.define('MyComp', {
extend: 'Ext.Component',

config: {
arrayVal: null,
boolVal: true,
sharedArray: [] // Same array goes to all objects

applyArrayVal: function(val) {
console.log('applyArrayVal called: value: ' + val);
return (null === val) ? [] : val;

applyBoolVal: function(val) {
console.log('applyBoolVal called: value: ' + val);
return val;

onReady: function() {
console.log('Touch version: ' + Ext.versions.touch);
console.log('OS: ' + Ext.os.name + ' ' + Ext.os.version);
console.log('Browser: ' + Ext.browser.name + ' ' + Ext.browser.version);

console.log('create with no config options');
obj = MyComp.create();
console.log('array Value: ' + obj.getArrayVal());

console.log('create with values for both.');
obj = MyComp.create({arrayVal: [1,2], boolVal: false});
console.log('Array Value: ' + obj.getArrayVal());

console.log('---------[ Demonstrate Shared ]-----------');
obj1 = MyComp.create();
console.log('Obj1 Initial Value: ' + obj1.getSharedArray());


obj2 = MyComp.create();
console.log('Obj2 Initial Value: ' + obj2.getSharedArray());

27 Mar 2012, 12:41 PM
I usually do this:

Ext.define('MyComp', {
extend : 'Ext.Component',
xtype : 'mycomp',

config : {
sharedArray : true

applySharedArray : function(value) {
return value === true ? [] : value;