Form <-> Model binding

[htammen]

In the comments of the blog about the new data package Ed Spencer mentioned that it is or will be possible to bind form data to a model (s. below).
I can´t find more details in the API docs. Is this feature already available?

2) Indeed - I prefer to do everything through the Model and just use the form for dumb data collection
3) Yes - if you configure a form with a Model it will ask the Model to validate itself, showing any errors on the appropriate field. This makes it easy to create very powerful validations

[mitchellsimoens]

Have you tried using the loadRecord method on the form? Sencha Touch and ExtJS 3 has this.

[htammen]

A model is more complex than a record. As far as I know a record is just a flat collection of fields. A model can furthermore contain associations. So a model can be a huge object tree.
BTW the Ext.data.Record class seem to have gone in Ext 4.

I know the model binding from Flex (BlazeDS). There you can exchange objects between frontend and backend and vice versa. Additionally there are tools that generate the frontend models from the backend models. So they are in sync at every time of development state. This makes life really easy.
Would be great to have something like that in ExtJS.

[mitchellsimoens]

According to the API docs for ExtJS 4... do this:

formpanel.getForm().loadRecord(rec);

Model and Record mean the same in ExtJS4/ST.

[htammen]

I´ve just had a look at the ExtJS 4 source code and I can´t imaging that this will work. The loadRecord method calls setValues and this method just tries to set the values of the form fields. So far it may work for fields and array. But I don´t see a way to have 1:1 relationships between two objects yet. On the other side I don't think that the reverse method udpateRecord does it's work in deep hierarchy.
Despite of my doubts I will give it a try.

[mitchellsimoens]

How is it making out for you?

[htammen]

The first attempt wasn´t successful. Will hopefully have more time to spend on this tomorrow.

[icflorescu]

Have you got more time to play around with it?
If you're thinking what I'm thinking, i.e. something like binding complex related models to forms with dynamically generated field blocks, you'll probably have to implement your own logic anyway. As you said a model can be far more complex than a record and there's no way for the framework to know what exactly you want to do with it.

One might think it could be done automatically with some sort of 'binding paths' mechanism (i.e. bind field X to user.comment.name) but a generic framework-level implementation would only work for one-to-one associations.

[wizkid]

I am really struggling with this tonight. I finally got my model working client-to server round tripping like a dream. So, naturally the next logical step was to put a UI on it. After all that's part of the big draw for ExtJS.

So what was suggested previously I did try:

simple.getForm().loadRecord(singleUserFormObj);

This is from my model. It looked like one way binding to me. I got the values in there. But then if I changed the value in my form they did not update my model object! Looks like a simple "reflection" type deal where it just setValue on the form.

So, now I guess I have a philosophical question before my technical question.

Did the new Model, with validation rules, ever have the intention to have the model and the form interact? I just don't see them in the API. Maybe I missed it. I have this awesome model object which I totally love. It has validation rules that are sweet. But what is the point of it all if I can't use it in a visual context? I see no reason to have a model that can't have a UI on top of it.

So with that in mind.

How do I connect up any ExtJS UI controls with my model and have automatic red halos around fields that violate client side validation rules on the model? If this is not possible please explain why I would want to use a model in ExtJS with validation rules?

I can see an argument related to having a model do the heavy chaotic lifting of getting and setting data server to client. Although it appears a form can do that for me as well. So I am getting a little confused what the Model is intended for in the context of this UI framework...

What I expected is a config option for the form that took a model or a store. Once that data is loaded I fully thought it would two-way bind and then typing in text that would violate a model rule would automatically show up in the UI!

Was this wishful thinking?

I am not being critical. Just inquisitive as I am just thinking I missed something in the examples or the documentation. I also understand this is pre-release....

[htammen]

To fill the model from the form there is the method Ext.form.Basic.updateRecord. This, as far as I remember, works for simple bindings (form field name == model property name) only.

It does not work for complex data 1:1 and 1:n associations.

I came to the same questions as you and I also thought that I´ve overseen something. As you mentioned I also don´t see a reason to implement a frontend model if it cannot be bound to the UI.

In the meantime it seems to me that this is still a field of basic development in which Sencha has to invest more effort.
As already mentioned Adobe solved this problem (http://livedocs.adobe.com/flex/3/htm...binding_2.html) and combined with BlazeDS you can work seamless between backend and frontend.