Results 1 to 2 of 2

Thread: What is best practice for default initialization of arrays in configs?

  1. #1
    Ext JS Premium Member
    Join Date
    Oct 2010
    Vote Rating

    Default What is best practice for default initialization of arrays in configs?

    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.version);
          console.log('Browser: ' + + ' ' + 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());

  2. #2
    Sencha Premium User mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Gainesville, FL
    Vote Rating


    I usually do this:

    Ext.define('MyComp', {
        extend : 'Ext.Component',
        xtype  : 'mycomp',
        config : {
            sharedArray : true
        applySharedArray : function(value) {
            return value === true ? [] : value;
    Mitchell Simoens @LikelyMitch
    Modus Create, Senior Frontend Engineer
    Need any sort of Ext JS help? Modus Create is here to help!

    Check out my GitHub:

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts