PDA

View Full Version : FormPanel - reader



Bleak
28 Apr 2010, 7:33 AM
I notice that the BasicForm has the option of adding a reader as part of the config params but the FormPanel does not? The example of the form panel on the Sample Site does set a reader however, so is the API out of date or is the sample incorrect?

I find it interesting, that there is no ability to utilize a reader to load data into a form panel. I am still researching, but can someone help point me in the right direction? I do not want to use a BasicForm and I do not want to use .setValue() methods for each field loaded from a store.

Thanks,
Dean.

cnelissen
28 Apr 2010, 7:56 AM
You can either use the load, or loadRecord methods of basicForm depending on your usage. i.e.



form.getForm().load({
url: '/some/backend/script.php',
params: {id: 1}
});


Your backend script should return a json object with the same field names as your form, and they will automatically be populated into the appropriate form fields. i.e.



{data: {field1: 'value1', field2: 'value2'}}


Or if you are loading from an existing store, you can load data into the form like:



store.getAt(0);
form.getForm().loadRecord(rec);


This would load the first record into the form. Obviously you will need to find the right method to select the desired record before doing the load.

Bleak
28 Apr 2010, 8:16 AM
Thanks Clint.

I do want to utilize an XmlReader as my backend returns XML Responses. I have done some further research, and I am able to set an XmlReader on the FormPanel, even though I do not see it in the API.




xtype: 'form',
labelWidth: 100,
labelAlign: 'left',
layout: 'form',
unstyled: true,
id: 'userForm',
waitMsgTarget: true,
reader: new Ext.data.XmlReader({
record : 'user',
success: '@success'
}, [
{name: 'accountFirstName', mapping: 'firstname'},
{name: 'accountLastName', mapping: 'lastname'}
])
This actually works well enough, my problem now, however, is that I want to be able to set the reader for the form outside of the UI definition. I'm creating these UI's in Designer and my goal is to not have to change the generated classes if at all possible.

I'm trying to find out how to set the reader, after the form is rendered at this point.

Bleak
28 Apr 2010, 8:30 AM
I understand how the reader can be defined in the options above, there is a method in the FormPanel Object called getForm() which returns the BasicForm object. This is the object that you can define a reader in.

My problem still persists however, although I can get access to the BasicForm now, I still do not see a way to define a reader on the basicform after it has been rendered.

Any thoughts?

Dean.

cnelissen
28 Apr 2010, 9:03 AM
Well its just an object, so I image you could set it anywhere in code, if it does indeed work as you intend. For instance:



var reader = new Ext.data.XmlReader({
record : 'user',
success: '@success'
}, [
{name: 'accountFirstName', mapping: 'firstname'},
{name: 'accountLastName', mapping: 'lastname'}
]);

Ext.getCmp('userForm').reader = reader;


As far as I know though, basicForm.load() expects results to be Json, so you are definitely in uncharted waters with this approach.

cnelissen
28 Apr 2010, 9:05 AM
Ah yes, I see that now too...

Try something like:

Ext.getCmp('userForm').getForm().reader = reader;

Bleak
28 Apr 2010, 9:10 AM
I've got it ;)



var config = {
reader: new Ext.data.XmlReader({
record : 'user',
success: '@success'
}, [
{name: 'accountFirstName', mapping: 'firstname'}, // custom mapping
{name: 'accountLastName', mapping: 'lastname'}
])
}

Ext.apply(formObj.getForm(), config);
If I want to change the config post rendering, the Ext.apply() method seems to need to be called. Once I did this, all things came together nicely. I got the solution by looking at the Tutorial on extending a component

http://www.extjs.com/learn/Tutorial:Extending_Ext2_Class

Appreciate the feedback, it helped me a lot.

Regards,
Dean.