PDA

View Full Version : FormPanel getForm load() and arrays



Palastanga
24 Aug 2009, 5:54 AM
It is possible to return associated arrays of JSON data rather than just a single array?
I can populate a FormPanel using the getForm().load() just fine if I return the JSON data in this format:



{
success: true,
data: {"salutation": 'Mr'}
}
However what i really want to return via JSON is this:



{
success: true,
data: {"Customer": {"salutation": 'Mr'}}
}
I've got lots more fields for Customer, as well as other associated arrays and details. Such as Survey.status and Status.name etc.

Using the second example my Form isn't populated, I've tried various different formats for the name param in my form such as Customer.salutation and Customer/salutation but none of them populate.

Is this even possible?



// Details Panel
fs = new Ext.FormPanel({
url: '/customers/save.json',
title: 'Details',
iconCls: icon('user'),
frame: true,
border: false,
showBorder: false,
bodyStyle: 'padding: 5px 5px 0',
items: [{
layout: 'column',
items: [{
title: 'Contact Information',
columnWidth: .5,
bodyStyle: 'padding: 10px;',
layout: 'form',
autoHeight: true,
iconCls: icon('telephone'),
defaults: {anchor: '95%'},
items: [{
xtype: 'textfield',
fieldLabel: 'Title',
name: "Customer.salutation",
anchor: '40%'
},{
...
This is my form load



...
// Load some data
console.debug(row['Customer.id']);
fs.getForm().load({
url: '/customers/view/' + row['Customer.id'] +'.json',
waitMsg: 'Loading',
method: 'GET',
success: function(form, action) {
//alert('loaded fine');
},
failure: function(form, action) {
alert('Failed to load data. Contact Support');
}
});


So keeping it simple - I can make this work if I just have simple key pairs, but if I want to use a more complex/deeper array I can't work out the correct syntaxt for the names of my forms.

Any help greatly appreciated

Pal.~o)

VinylFox
24 Aug 2009, 6:10 AM
Im sure there are some overrides you could make to get that to work, but the easier way might just be performing a regular Ajax request for the data, splitting it up into its pieces and calling setValues on each form.

jiffyjub
1 Oct 2009, 6:18 PM
can you give me an example of spliting the json field please

Palastanga
2 Oct 2009, 1:48 AM
Hope this helps you, but this is what I'm using now for my JSON arrays. Use as an example only. I map data[Customer][surname] to Customer.surname from the JSON array. I use this data[Model][field] format because I am using CakePHP as the back end, and it makes it very easy for me to save my data.

The trick seems to be to create a record, and then pass this param to the reader (highlighted in bold for you). Hope this helps you or someone else. Works great for me.



var CustomerRecord = Ext.data.Record.create([
{name: 'data[Customer][salutation]', mapping: 'Customer.salutation'},
{name: 'data[Customer][surname]', mapping: 'Customer.surname'},
{name: 'data[Customer][address1]', mapping: 'Customer.address1'},
{name: 'data[Customer][address2]', mapping: 'Customer.address2'},
{name: 'data[Customer][address3]', mapping: 'Customer.address3'},
{name: 'data[Customer][address4]', mapping: 'Customer.address4'},
{name: 'data[Customer][house]', mapping: 'Customer.house'},
{name: 'data[Customer][postcode]', mapping: 'Customer.postcode'},
{name: 'data[Customer][telephone]', mapping: 'Customer.telephone'},
{name: 'data[Customer][mobile]', mapping: 'Customer.mobile'},
{name: 'data[Customer][email]', mapping: 'Customer.email'},
{name: 'data[Customer][age]', mapping: 'Customer.age'},
{name: 'data[Customer][source_id]', mapping: 'Customer.source_id'},
{name: 'data[Customer][scheme_id]', mapping: 'Customer.scheme_id'},
{name: 'data[Customer][housetype_id]', mapping: 'Customer.housetype_id'},
{name: 'data[Customer][authority_id]', mapping: 'Customer.authority_id'},
{name: 'data[Customer][tenure_id]', mapping: 'Customer.tenure_id'},
{name: 'data[Customer][fueltype_id]', mapping: 'Customer.fueltype_id'},
{name: 'data[Customer][utility_id]', mapping: 'Customer.utility_id'},
{name: 'data[Customer][paperwork]', mapping: 'Customer.paperwork'},
{name: 'data[Authority][name]', mapping: 'Authority.name'}

]);


var detailsPanel = new Ext.FormPanel({
reader: new Ext.data.JsonReader({
root: 'data',
record: 'data',
successProperty: 'success',
success: '@success',
}, CustomerRecord),
labelAlign: 'top',
monitorValid: true,
frame: true,
border: false,
title: 'Customer information',
iconCls: icon('information'),
bodyStyle:'padding:5px',
items: [{
layout:'column',
border:false,
items:[{
defaults: {anchor: '95%'},
columnWidth:.2,
layout: 'form',
border:false,
items: [{
xtype:'textfield',
fieldLabel: 'Title',
name: 'data[Customer][salutation]',
}, {
xtype:'textfield',
fieldLabel: 'Surname',
name: 'data[Customer][surname]',
}, {
xtype:'textfield',
fieldLabel: 'House Number',
name: 'data[Customer][house]',
}, {
xtype:'textfield',
fieldLabel: 'Postcode',
name: 'data[Customer][postcode]',
}]
}
// Etc

Then load the data


detailsPanel.getForm().load({ url: '/someurl.json'});