PDA

View Full Version : Form Load Problem



Diddy433
21 Jan 2011, 4:04 PM
I have a form with two fieldsets. I can't figure out why the first fieldset does not populate with data but the second does. More specifically, team name does not populate when clearly it is in the JSON. See below for code and form.load ajax response. Any help would be greatly appreciated.

Ajax Response from form.load

{success: "true", results: 1, data: {"id":"5","name":"testing","motto":"","email":"[email protected]","first_name":"Tester","last_name":"McDonald","age":"24","sex":"Male","address":"123 Main St.","city":"New York","state":"NY","zip":"","user_type_id":"1","username":"jfrye"}}Setting up the form:



var jsonReader = new Ext.data.JsonReader({
idProperty: 'id',
root: 'data',
totalProperty: 'results',
fields: [
{name: 't_name', mapping: 'name'},
{name: 't_motto', mapping: 'motto'},
{name: 'username', mapping: 'username'},
{name: 'email', mapping: 'email'},
{name: 'first_name', mapping: 'first_name'},
{name: 'last_name', mapping: 'last_name'},
{name: 'age', mapping: 'age'},
{name: 'sex', mapping: 'sex'},
{name: 'address', mapping: 'address'},
{name: 'city', mapping: 'city'},
{name: 'state', mapping: 'state'},
{name: 'zip', mapping: 'zip'}
]
});

Ext.applyIf(this, {
autoScroll: true,
bodyStyle:'padding:5px 5px 0',
labelWidth: 75,
frame:false,
reader: jsonReader,
region: 'center',
margins: '5 0 0 5',
width: 350,
listeners: {
'afterrender': {
fn: this.l_afterrender,
scope: this
}
},
items: [{
xtype:'fieldset',
//collapsible: true,
//collapsed: true,
//disabled: true,
title: 'Team Information',
autoHeight:true,
defaults: {width: 210},
defaultType: 'textfield',
items :[{
fieldLabel: 'Team Name',
name: 't_name'
},{
fieldLabel: 'Motto',
name: 't_motto'
}
]
},{
xtype:'fieldset',
title: 'Personal Information',
//collapsible: true,
//collapsed: true,
autoHeight:true,
defaults: {width: 210},
defaultType: 'textfield',
items :[{
fieldLabel: 'Username',
name: 'username'
},{
fieldLabel: 'Email',
name: 'email'
},{
fieldLabel: 'First Name',
name: 'first_name'
},{
fieldLabel: 'Last Name',
name: 'last_name'
},{
fieldLabel: 'Age',
name: 'age'
},{
fieldLabel: 'Sex',
name: 'sex'
},{
fieldLabel: 'Address',
name: 'address'
},{
fieldLabel: 'City',
name: 'city'
},{
fieldLabel: 'State',
name: 'state'
},{
fieldLabel: 'Zip',
name: 'zip'
}
]
}],
buttons: [{
text: 'Update',
handler: this.onUpdate,
scope: this
},{
text: 'Cancel'
}]
});

Loading the form



, l_afterrender : function(panel){
panel.getForm().load({
url: BASE_URL + 'user/load_myteam_form',
success: function(form, action){
console.log('success load');
},
failure: function(form, action){
console.log('failure load');
}
});
}

darthwes
21 Jan 2011, 7:52 PM
Your combos names need to match the field name in the store. IE your using t_name and t_motto but you don't have a t_name and a t_motto in your response.

EDIT: Excuse me, I think your mapping might be configured backwards, but I don't use mapping in my day-to-day stuff so I'm not sure. Try {name: 't_name', mapping: 'name'} and lets see what that produces (away from my dev server).

Diddy433
22 Jan 2011, 11:55 AM
Your combos names need to match the field name in the store. IE your using t_name and t_motto but you don't have a t_name and a t_motto in your response.

EDIT: Excuse me, I think your mapping might be configured backwards, but I don't use mapping in my day-to-day stuff so I'm not sure. Try {name: 't_name', mapping: 'name'} and lets see what that produces (away from my dev server).

I tried your suggestion, no luck. Some extra information that would have been helpful from the beginning is that I have this application loaded on a server and it is working correctly with the mapping as I have it now. See below for the code from the server. The only difference is the names are tName and tMotto instead of using underscores (Same JSON response and everything). I try to change the change the names locally back to tName and tMotto but still not working.




var jsonReader = new Ext.data.JsonReader({
idProperty: 'id',
root: 'data',
totalProperty: 'results',
fields: [
{name: 'username', mapping: 'username'},
{name: 'email', mapping: 'email'},
{name: 'first_name', mapping: 'first_name'},
{name: 'last_name', mapping: 'last_name'},
{name: 'age', mapping: 'age'},
{name: 'sex', mapping: 'sex'},
{name: 'address', mapping: 'address'},
{name: 'city', mapping: 'city'},
{name: 'state', mapping: 'state'},
{name: 'zip', mapping: 'zip'},
{name: 'tName', mapping: 'name'},
{name: 'tMotto', mapping: 'motto'}

]
});

var form = new Ext.FormPanel({
autoScroll: true,
labelWidth: 75,
frame:false,
reader: jsonReader,
region: 'center',
margins: '5 0 0 5',
bodyStyle:'padding:5px 5px 0',
width: 350,
listeners: {
'afterrender': {
fn: function(panel){
var form = panel.getForm();
form.load({
url: BASE_URL + 'user/load_my_team',
success: function(form, action){
//console.log('success');
},
failure: function(form, action){
//console.log('failure');
}
})
},
scope: this
}
},
items: [{
xtype:'fieldset',
title: 'Team Information',
autoHeight:true,
defaults: {width: 210},
defaultType: 'textfield',
items :[{
fieldLabel: 'Team Name',
name: 'tName'
},{
fieldLabel: 'Motto',
name: 'tMotto'
}
]
},{
xtype:'fieldset',
title: 'Personal Information',
autoHeight:true,
defaults: {width: 210},
defaultType: 'textfield',
items :[{
fieldLabel: 'Username',
name: 'username'
},{
fieldLabel: 'Email',
name: 'email'
},{
fieldLabel: 'First Name',
name: 'first_name'
},{
fieldLabel: 'Last Name',
name: 'last_name'
},{
fieldLabel: 'Age',
name: 'age'
},{
fieldLabel: 'Sex',
name: 'sex'
},{
fieldLabel: 'Address',
name: 'address'
},{
fieldLabel: 'City',
name: 'city'
},{
fieldLabel: 'State',
name: 'state'
},{
fieldLabel: 'Zip',
name: 'zip'
}
]
}],
buttons: [{
text: 'Update'
},{
text: 'Cancel'
}]
});

Diddy433
22 Jan 2011, 12:00 PM
I got it to work. I re-named the name and mapping to "name" and "motto" respectively and renamed my field names to "name" and "motto" and it worked locally.

I know it is supposed to be able to work the other way I had it but not sure what is up. Not sure why it works on the live server...




var jsonReader = new Ext.data.JsonReader({
idProperty: 'id',
root: 'data',
totalProperty: 'results',
fields: [
{name: 'name', mapping: 'name'},
{name: 'motto', mapping: 'motto'},
{name: 'username', mapping: 'username'},
{name: 'email', mapping: 'email'},
{name: 'first_name', mapping: 'first_name'},
{name: 'last_name', mapping: 'last_name'},
{name: 'age', mapping: 'age'},
{name: 'sex', mapping: 'sex'},
{name: 'address', mapping: 'address'},
{name: 'city', mapping: 'city'},
{name: 'state', mapping: 'state'},
{name: 'zip', mapping: 'zip'}
]
});

Ext.applyIf(this, {
autoScroll: true,
bodyStyle:'padding:5px 5px 0',
labelWidth: 75,
frame:false,
reader: jsonReader,
region: 'center',
margins: '5 0 0 5',
width: 350,
listeners: {
'afterrender': {
fn: this.l_afterrender,
scope: this
}
},
items: [{
xtype:'fieldset',
//collapsible: true,
//collapsed: true,
//disabled: true,
title: 'Team Information',
autoHeight:true,
defaults: {width: 210},
defaultType: 'textfield',
items :[{
fieldLabel: 'Team Name',
name: 'name'
},{
fieldLabel: 'Motto',
name: 'motto'
}
]
},{


......