PDA

View Full Version : another 'pulling data into form' problem



Stripeman
23 Jul 2009, 12:51 PM
I have read and read... threads like
http://extjs.com/forum/showthread.php?t=21645
and
http://extjs.com/forum/showthread.php?t=19673
and MANY others...

and I am getting the data back ok... The JSON is coming back ok.. but NONE of the fields are just not populating.. Its got to be something small. a render thing.. or ... something...

If i could please trouble someone to take a quick gander I would appreciate it very much

The JSON Returned:


{"success":true, "data":[
{"app_raid_ids":'159'},
{"char":'Deathwilbeu'},
{"sun":'0'},
{"mon":'0'},
{"tues":'0'},
{"wed":'0'},
{"thurs":'0'},
{"fri":'0'},
{"sat":'0'},
{"prefered_role":'0'},
{"date_updated":'0000-00-00 00:00:00'},
{"comments":''}
]}


The JS.....


Ext.onReady(function(){

Ext.BLANK_IMAGE_URL = this.extBlankImageURL;
Ext.QuickTips.init();


// simple array store
var fieldsRole = [
{name: 'role', type: 'string'}
];

var storeRole = new Ext.data.SimpleStore({
fields: fieldsRole,
data: [
['Tank'],['DPS'],['Heals']
]
});

var fn_availOptions = function (day_val){

if (!day_val) var day_val = 'N';

return [
{boxLabel: 'Always', name: day_val, inputValue: 'A' },
{boxLabel: 'Sometimes', name: day_val, inputValue: 'S' }, //, checked: true
{boxLabel: 'Never', name: day_val, inputValue: 'N' }
]
};

var editUser = new Ext.FormPanel({
width : 390,
border :false,
items : [{
xtype: 'fieldset',
title: 'General Info',
layout:'form',
autoHeight: true,
collapsed: false, // initially collapse the group
collapsible: true,
defaultType: 'textfield',
items:[{
name : 'app_raid_ids',
fieldLabel : 'Raid ID',
readOnly : true
},{
name : 'character_name',
fieldLabel : 'Character Name',
mapping : 'char',
readOnly : true
},
new Ext.form.ComboBox({
tpl: '<tpl for="."><div ext:qtip="{role}. {role}" class="x-combo-list-item">{role}</div></tpl>',
name: 'prefered_role',
store: storeRole,
displayField:'role',
allowBlank : false,
mode: 'local',
triggerAction: 'all',
emptyText:'Select a Role...',
fieldLabel : 'Prefered Role'
})
]
},{
xtype: 'fieldset',
layout:'form',
title: 'Raid Availability',
autoHeight: true,
collapsed: false, // initially collapse the group
collapsible: true,
items:[{
id : 'id_avail_mon',
name : 'mon',
xtype : 'radiogroup',
msgTarget : 'qtip',
cls : 'x-form-check-group-label',
columns : 3,
allowBlank : false,
fieldLabel : 'Monday',
items : fn_availOptions('mon')
},{
id : 'id_avail_tues',
name : 'tues',
xtype : 'radiogroup',
cls : 'x-form-check-group-label',
columns : 3,
allowBlank : false,
fieldLabel : 'Tuesday',
items : fn_availOptions('tues')
},{
id : 'id_avail_wed',
name : 'wed',
cls : 'x-form-check-group-label',
xtype : 'radiogroup',
columns : 3,
allowBlank : false,
fieldLabel : 'Wednesday',
items : fn_availOptions('wed')
},{
id : 'id_avail_thurs',
name : 'thurs',
cls : 'x-form-check-group-label',
xtype : 'radiogroup',
columns : 3,
allowBlank : false,
fieldLabel : 'Thursday',
items : fn_availOptions('thurs')
},{
id : 'id_avail_fri',
name : 'fri',
xtype : 'radiogroup',
cls : 'x-form-check-group-label',
columns : 3,
allowBlank : false,
fieldLabel : 'Friday',
items : fn_availOptions('fri')
}]

},{
xtype : 'fieldset',
title : 'Comments',
layout:'form',
autoHeight : true,
collapsed : true, // initially collapse the group
collapsible : true,
items :[{
xtype : 'htmleditor',
fieldLabel : 'User',
id : 'user_comments',
name : 'user_comments',
height : 100,
width : 80,
anchor : '98%'
},{
xtype : 'htmleditor',
fieldLabel : 'Officer',
id : 'officer_comments',
name : 'officer_comments',
height : 100,
width : 80,
anchor : '98%'
}]
},{
xtype : 'fieldset',
layout:'form',
title : 'Copyright and Information about this page.',
autoHeight : true,
collapsed : true, // initially collapse the group
collapsible : true,
html : 'This site and features...'
}],
buttons : [{
text : 'Save',
handler:function() {
editUser.getForm().submit({
method : 'POST',
url : 'save-form.php',
params : { 'param1': 'param1Value', 'param2':'param2Value' },
success :function(form, action) {
/* Optional (could also be on the onload)*/
alert('Success:\n' + action.response.responseText);
},
failure :function(form, action) {
/* Optional (could also be on the onload)*/
alert('Failure: ' + action.failureType);
}
});
}
},{
text : 'Cancel',
handler: function(){
createWindow.hide();
}
},{
text : 'Load',
handler:function() {
editUser.getForm().load({
waitMsg:'Loading',
method : 'GET',
url : '/apply/get_character.php',
params : { 'ac': 'getData' },
success: function (result,request) {
Ext.MessageBox.alert('Message', 'Loaded OK');
},

failure: function (result,request) {
Ext.MessageBox.alert('Error', 'Load failed');
}

});
}
}],
/* Could use listeners to populate the form */
listeners:{
render:function() {
this.getForm().load({url:'/apply/get_character.php', method:'GET', params:{'ac': 'getData'}})
}
}
});

createWindow = new Ext.Window({
title : 'Edit Character Info',
width : 420,
autoHeight : true,
closable : true,
closeAction: 'hide',
modal : true,
border : false,
layout : 'form',
items : editUser
});

Ext.msg.msg('Notice: ', "User Loaded... ");
});

Stripeman
23 Jul 2009, 1:01 PM
I wanted to mention as well that the only three I am trying to populate are "app_raid_ids"," prefered_role" and "character_name"

mjlecomte
23 Jul 2009, 5:39 PM
I'm a believer in reducing your unknowns. For example make your form just have one field and try to load that one field. Less code to crawl through to figure out what's going wrong. Once you got the one field populated start uncommenting sections of your code.

Stripeman
24 Jul 2009, 12:42 AM
Thanks for the reply.. your suggestion is sound...

Ok.. i stripped most of it down.. but it still is not bringing in the values into the forums. I don't know much more simple i can make this...

JS...


//Globals
var fieldsRole;
var storeRole;
var editUser;
var createWindow;

Ext.onReady(function(){

Ext.BLANK_IMAGE_URL = this.extBlankImageURL;

editUser = new Ext.form.FormPanel({ //tried Ext.form.FormPanel and Ext.FormPanel - no difference
width : 390,
border :false,
items : [{
xtype : 'fieldset',
layout : 'form', //tried with and without this as well
title : 'General Info',
defaultType : 'textfield',
items :[{
name : 'app_raid_ids',
fieldLabel : 'Raid ID'
},{
name : 'char',
fieldLabel : 'Character Name'
}
]
}],
buttons : [{
text : 'Load',
handler :function() {
editUser.getForm().load({
waitMsg :'Loading',
method : 'GET',
url : '/apply/get_character.php',
params : { 'ac': 'getData' },
success : function (result,request) {
Ext.MessageBox.alert('Message', 'Loaded OK');
},

failure : function (result,request) {
Ext.MessageBox.alert('Error', 'Load failed');
}

});
}
}]
});

createWindow = new Ext.Window({
title : 'Edit Character Info',
width : 420,
autoHeight : true,
closable : true,
closeAction : 'hide',
modal : true,
border : false,
layout : 'form',
items : editUser
});

Ext.msg.msg('Notice: ', "User Loaded... ");
});


PHP is returning (verified by firebug):


{success:true, data:[{app_raid_ids:'159'},{char:'Deathwilbeu'},{sun:'0'},{mon:'0'},{tues:'0'},{wed:'0'},{thurs:'0'},{fri:'0'},{sat:'0'},{prefered_role:'0'},{date_updated:'0000-00-00 00:00:00'},{comments:''}]}

Condor
24 Jul 2009, 12:54 AM
1. You can't load the form in the 'render' event, because the inner fields won't be rendered yet. Use the afterlayout event instead (with a {single:true} to stop if from loading multiple times).
2. Your JSON data is incorrect for a form without a reader (the data element shouldn't be an array). In contrast, if you did define a JsonReader form reader, the data element should indeed be an array.

Stripeman
24 Jul 2009, 1:06 AM
Thanks for the suggestions.
Like i said I tried with and without the layout (now removed )

The "{single:true}" your talking about gets applied to the Load right?


buttons : [{
text : 'Load',
handler :function() {

editUser.getForm().load({
waitMsg :'Loading...',
method : 'GET',
url : '/apply/get_character.php',
params : {
'ac': 'getData'
},
success : function (result,request) {
Ext.MessageBox.alert('Message', 'Loaded OK');
},

failure : function (result,request) {
Ext.MessageBox.alert('Error', 'Load failed');
}

},true, { single: true });
}
}]


As far as the returned data.. I made sure it was in the exact format indicated in the links I posted in the original post. Animal said that it MUST have a success:true and a 'data' with a field:value set for each field...



{success:true, data:[{app_raid_ids:'159'},{char:'Deathwilbeu'},{sun:'0'},{mon:'0'},{tues:'0'},{wed:'0'},{thurs:'0'},{fri:'0'},{sat:'0'},{prefered_role:'0'},{date_updated:'0000-00-00 00:00:00'},{comments:''}]}


I am actually buliding that string thats returned (using PHP4). It is not an object.

Condor
24 Jul 2009, 1:36 AM
No, the {single:true} was for your first example (that used the form render event).

Your JSON data is completely wrong! It should be:


{
success:true,
data:{
app_raid_ids:'159',
char:'Deathwilbeu',
sun:'0',
mon:'0',
tues:'0',
wed:'0',
thurs:'0',
fri:'0',
sat:'0',
prefered_role:'0',
date_updated:'0000-00-00 00:00:00',
comments:''
}
}
(added indentation for readability, but the final data shouldn't contain this)

Stripeman
24 Jul 2009, 1:51 AM
Thanks Condor...

I now have the correct string as indicated being returned.



{success:true, data:{app_raid_ids:'159'},{char:'Deathwilbeu'},{sun:'0'},{mon:'0'},{tues:'0'},{wed:'0'},{thurs:'0'},{fri:'0'},{sat:'0'},{prefered_role:'0'},{date_updated:'0000-00-00 00:00:00'},{comments:''}}


Now i get an error in firebug saying:


invalid property id
[Break on this error] ({success:true, data:{app_raid_ids:'159'...d:'0000-00-00 00:00:00'},{comments:''}})



and the wait bar just sits there and continues to well.. wait lol

is it expected an "id" field returned?


.

Animal
24 Jul 2009, 2:11 AM
That is not what Condor suggested.

The required format is quite clearly documented: http://extjs.com/deploy/dev/docs/?class=Ext.form.Action.Load

Stripeman
24 Jul 2009, 4:06 AM
Your right Animal!! Thanks Condor for pin pointing my problem. Got it. Its working now! Thanks you guys for pointing me in the right direction. Thanks so much. I guess I am just so used to everything being in an array i over looked the format of the string. Thanks so much Guys.

Thanks for your patience.