View Full Version : Data Binding extension for Ext components

14 Jan 2009, 10:56 AM
The Ext.ux.DataBind is a small library you can use to bind the properties of an object (the model of your application) to textfields (the views) so that if you change the content of a textfield, the change is saved in your underlying object property(the model) and this will notify in case other views interested on it so that they can refresh the new value of that property.
I have implemented the class (it's a plugin) that binds a textfield to the property of the object and also the plugin for grid and editor grid data binding.
Note that the model class in the library, Ext.ux.model, is actually a wrapper of the actual model of the application...The save, update and cancel methods are not implemented in the small example yet, but you can guess what their responsability is (save will send to the server the object to be saved in the db etc etc).
Documentation and implementation of more data binding hopefully will come soon...

Looking forward to hearing from you.


14 Jan 2009, 12:25 PM
This is very interesting, and somewhat similar to what we did, although yours is much more complete and generic - we just hacked in what we needed, nothing more, so... But this looks like a solid concept.

It's one step beyond the issues that I'm trying to address with this discussion - but this would be what it's leading up to, eventually... nice work :-)

14 Jan 2009, 12:41 PM
Thanks mindplay for your kind comment...I know it's more a draft and a proof of concept, but I hope to have time and to improve it...
Thanks again for the feedback

15 Jan 2009, 6:36 AM
I have updated the previous version. I have completely changed the Ext.ux.Utility class, following the getJsonAccessor code style you can find in JsonReader (probably that code should go in the core of Ext as a generic utility).

I have also added the data binding plugins for grid and editor grid components and modified the example to use the new features.

As usual, I keep updating the first post.

17 Feb 2009, 7:55 AM
It's a similar concept.

It looks like you generate a new accessor function for every get and set though:

In Ext.ux.Model:

setProperty: function(propertyPathToBind, propertyNewValue){
if(this.getJsonObj() == null || propertyPathToBind == null)
return false;
return false;
var propertyOldValue = Ext.ux.Utility.getJsonAccessor(propertyPathToBind)(this.getJsonObj());
Ext.ux.Utility.setJsonAccessor(propertyPathToBind)(this.getJsonObj(), propertyNewValue);
if(this.onPropertyChanging(propertyPathToBind, propertyNewValue, propertyOldValue) === true){
this.onPropertyChanged(propertyPathToBind, propertyNewValue, propertyOldValue);
return true;
return false;

getProperty: function(propertyPathToBind){
if(this.getJsonObj() == null || propertyPathToBind == null)
return null;
return Ext.ux.Utility.getJsonAccessor(propertyPathToBind)(this.getJsonObj());

That could add up to a lot of code compilation, and hundreds (or thousands) of discarded functions to (hopefully) garbage collect.

17 Feb 2009, 8:04 AM
Oppss, my bad!

Thanks a lot Nige, you are completely right.

I should use some cache mechanism in order to avoid that.

I'll come up with something hopefully soon.

Thanks again, I really appreciate it.

17 Feb 2009, 8:23 AM
FYI, here is another approach: http://examples.extjs.eu/?ex=databind

18 Feb 2009, 6:57 AM
Thanks Saki for pointing out also another approach.

I fixed the issue Nige kindly pointed out with the use of an internal "cache" for the get and set properties that sounds sensible to me, thanks again!

I have uploaded the new version of the library (I keep updating the first post)

Thanks for your valuable feedbacks