Using Property Setters and Getters with Ext JS

Every once and a while I come across a bug where I need to go above and beyond the normal debugging norm to solve my problem.

My Bug

I had a boolean property on my column model that was getting set to the opposite of what I had initially set it to. Somewhere between the initial setting and it's reading back for column creation it was getting flipped from false to true. This is not a terribly uncommon thing to happen, but usually setting a few breakpoints at key locations in the code can find your problem. That wasn't working here.

I needed to find out exactly when the property got set and print out some info about where it happened. I had read about the new JavaScript setters and getters but never had a practical application to use them. This seemed a perfect fit.

Round #1 - Fight!

My first attempt looked something like this (I didn't look at any documentation, just typed from vague memory)...

var a = { sortable: false, get sortable(){ return this.sortable; }, set sortable(val){ this.sortable = val; } };

Oh wow, that was an epic failure - "SyntaxError: Object literal may not have data and accessor property with the same name".

Round #2

Ok, let's just try that again, but remove the initial value and put that in the getter...

var a = { get sortable(){ return this.sortable || false; }, set sortable(val){ this.sortable = val; } };

That worked, kinda. Trying to access the property however was not successful.

a.sortable

Error: "RangeError: Maximum call stack size exceeded"

Let's just step back for a second and talk about why this is recursive - I have setup a getter method for sortable that returns this.sortable which is in fact calling the getter method itself, hence the recursion. Now we can move on to what does work.

Round #3 - Win!

So now we have what I like to call the "I guess I should look at that documentation" moment, and after some other googling and reading of docs (linked at the end of this post) I found the correct usage along with the following quote that nicely sums up the problem I encountered on my first attempt:

...we have a new pitfall to avoid when iterating and cloning object properties, not to mention a significant risk of involuntary recursion...

Angus Croll

Yeah, thats me - Mr. Involuntary Recursion. Let's try that again, but this time well store our value in a different property so the name does not collide with the setter and getter thereby causing a recursive get or set.

var a = { sortableAlt: false, get sortable() { return this.sortableAlt; }, set sortable(val) { this.sortableAlt = val; } };

Much better, that works as expected and now I can safely monitor a property for changes and do some debugging.

Here is what I ended up using as one of my column configs in my column model, using console.trace to get more details about the event.

var a = { header: "Rich Media", width: 70, dataIndex: 'expandable', sortableAlt: false, get sortable() { console.log('get : '+this.sortableAlt, this, console.trace()); return this.sortableAlt; }, set sortable(val) { console.log('set : '+ this.sortableAlt, this, console.trace()); this.sortableAlt = val; } };

This seemed like it should work, but didn't. The reason it didn't was due to the fact that the Ext JS library tries to break the referencing of objects by copying their properties over to a new object, and the method that does this could not differentiate between a property and a getter/setter method. A slight modification allowed it to make that distinction and voila!

The Magic

Ext.apply = function(o, c, defaults){ var p, s, g; if(defaults){ Ext.apply(o, defaults); } if(o && c && typeof c == 'object'){ for(p in c){ s = c.__lookupSetter__(p); g = c.__lookupGetter__(p); if (s){ o.__defineSetter__(p, s); } if (g){ o.__defineGetter__(p, g); } if (!s && !g) { o[p] = c[p]; } } } return o; };

By copying the setter/getter over to the new object we are now able to monitor a property all of the way through the stack.

Enjoy!

The following are some references I found useful when figuring this stuff out.

• eJohn - getters & setters
• eJohn - objects & properties
• Mozilla Dev Center - Defining get/set
• JavaScript Web Log