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.
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.
Round #1 - Fight!
My first attempt looked something like this (I didn't look at any documentation, just typed from vague memory)...
Oh wow, that was an epic failure - "SyntaxError: Object literal may not have data and accessor property with the same name".
Ok, let's just try that again, but remove the initial value and put that in the getter...
That worked, kinda. Trying to access the property however was not successful.
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...
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.
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.
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!
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.
The following are some references I found useful when figuring this stuff out.