PDA

View Full Version : Binding HasBelongTo fields in a form and send to server



ahmedmohammed
20 Feb 2014, 3:14 PM
Hi,
I have a requirement to create a form which will have as many set of addresses records which can be added/removed by user clicking some button. I wanted to know if there is a way to do it.
Below are my view and models. Employee Model is being populated correctly from the store with all the addressess from server.


Ext.define('sample.model.Employee', {
extend: 'Ext.data.Model',
fields: [
// Person Class
// Auto
'id',
'name',
associations: [{
type: 'hasMany',
model: 'sample.model.Address',
name: 'showDetailsList'
}],
]
});

Ext.define('sample.model.Address', {
extend: 'Ext.data.Model',
fields: [
'addressId',
'street',
'city',
'zipcode'
],
belongsTo: 'Employee'
});

View:




Ext.define('sample.view.PersonAddressForm', {


extend : 'Ext.form.Panel',

frame : true,
layout: 'anchor',
fieldDefaults: {
// labelAlign: 'top',
// labelWidth: 100,
labelStyle: 'font-weight:bold'
},
defaults: {
anchor: '100%',
margins: '0 0 0 0'
},


initComponent : function() {
var me = this;
Ext.applyIf(me,{items: [
{
xtype : 'hiddenfield',
name : 'id'
},
{


xtype : 'fieldset',
itemId : 'Content_Edit_Show_Row',
border:0,
layout : { type : 'vbox' },
items : [
{
xtype:'container',
layout : { type : 'hbox' },
items : [
{
xtype: 'hiddenfield',
name: 'addressId'
},
{
xtype: 'textfield',
name: 'street'
},{
xtype: 'textfield',
name: 'state'
},{
xtype: 'textfield',
name: 'zipcode'
},
{
xtype: 'button',
text : 'Add another',
handler: function() {
var container = this.up('fieldset');
var tuple = this.up('container');
debugger
console.dir(container);
var configItems=container.initialConfig.items.splice(container.initialConfig.items.length,1);


container.add(container.initialConfig.items);
}
}]}
]
}
]


});




Ext.applyIf(me, {
buttonAlign : 'center',
buttons: [
{
text: 'submit',
action: 'submitForm'
},
{
text: 'cancel',
action:'cancelForm'
}
] // buttons
}); // Ext.applyIf()




me.callParent(arguments);


} // of initComponent


});


Any help would be appreciated.
Thanks,
Ahmed

scottmartin
20 Feb 2014, 5:00 PM
The writer does not support associated data. You would need to send the extra info in the payload and have the server parse and handle how the update.

brian428
20 Feb 2014, 10:29 PM
As Scott mentioned, there's no built-in way to do either of these things right now.

You can't bind a form (or anything, actually) to an associated property. You'll have to set it yourself.

Saving a Model or syncing a Store also doesn't send associated data. You'll have to save the associated data separately.

It's definitely a pain, but this is just how it is right now. Dealing with associated data is one area where Ext JS is sorely lacking. Sencha has a lot of smart developers, and Ext JS has some pretty amazing features, but the current implementation of Model associations is not one of them. Hopefully they'll rework all of this in version 5.

ahmedmohammed
27 Mar 2014, 9:03 AM
Thanks for the suggestions. I was able to achieve by adding the child object into parent object before calling store.update.