I often use config objects for my projects in order to easily configure components (kind of like a pojo java bean). These classes have a number of default values that can be overridden in the configuration of the component.

I serialize the config as a json string on my server using Ext.encode(). I only want to serialize those values that differ from the default. In order to do this I have added the following function to the Ext class:

PHP Code:
Ext.applyIfChanged = function(objectconfig){
    var 
property;
    if (object) {
        for (
property in config) {
            if (
object[property] === undefined) {
                
object[property] = config[property];
            } else {
                if(
object[property] !== config[property]) {
                    
object[property] = config[property]
                }
            }
        }
    }
    return 
object;
}; 
I'll illustrate why I've done this with an example. Let's say I have a configuration object called Style:
PHP Code:
Ext.define('Style',{
    
extend 'Ext.Base',
    
size 12,
    
color '#000000',

    
constructor : function(config) {
        var 
me this;

        
config config || {};
        
Ext.apply(meconfig);

        
me.callParent([ config ]);
    }
}); 
This object has two properties with a default value. I would use a form to be able to set the different properties. A user would not necessarily change all vales so I only want to store the changed values (ie those that are different from the default)

PHP Code:
Ext.onReady(function() {
    var 
style Ext.create('Style', {
        
size 24
    
});

    
console.log(Ext.encode(style));

    
Ext.apply(style, {
        
size 12,
        
color '#000000'
    
});
    
console.log(Ext.encode(style));
}); 
The above code will show the following json strings in the console:

PHP Code:
{"size":24}
{
"size":12,"color":"#000000"
As you can see the color gets serialized even though it has not been changed. When I use the Ext.applyIfChanged method only the changed size will be stored and the color will be ignored:
PHP Code:
Ext.applyIfChanged(style, {
    
size 12,
    
color '#000000'
});
console.log(Ext.encode(style)); 
PHP Code:
{"size":24}
{
"size":12
Does anybody have a better way of achieving this result?

Cheers,

Snoekie