PDA

View Full Version : Dynamic form fields with XML?



Sammii
15 Feb 2011, 3:48 PM
I am very new to this so please bear with me. :) I'm trying to generate dynamic form fields in a FormPanel through my XML. I want to use a loop that builds a new checkbox for each XML attribute, with the fieldLabel being pulled from my XML as well. I'm not worrying about the actual form values right now, just the structure (checkboxes). The values will eventually come from a database.

However, I'm having trouble setting the fieldLabel through my XML, period. (It seems the XML will only update the field VALUES based on the 'name'. I'm new to this remember, so I could be missing something obvious.) How do I reference the XML attributes in order to set the fieldLabel?

I am also having trouble with the loop part because I am only ever getting the first result from my XML. It seems I might need to put my XML results into an array? My Javascript is pretty basic so I can't remember if a loop will be sufficient or if I need to put the results into an array first.

I have the XML Reader functioning and I can get it to set the field values for a static field. This is the form code that I have:

First, the loop, with a static textfield at the beginning for testing:


var myItems = [
{
fieldLabel: 'Shazam',
labelSeparator: '',
name: 'task',
id: 'shazam'
}];

for(var i=0; i<5;i++){
myItems.push({
fieldLabel: 'blah'+i,
labelSeparator: '',
name: 'task',
id: 'extranetsetup-'+i
});
}

Then the FormPanel and XMLReader:



var productionForm = new Ext.FormPanel({
labelWidth: 100,
id: 'productionform',
title: 'Production',
defaults: {width: 230},
defaultType: 'textfield',
reader : new Ext.data.XmlReader({
record: 'tasks',
success: '@success',
}, [
{name: 'task', mapping: 'task'}
]),
items: myItems,
buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]

});

productionForm.addButton('Load', function(){
productionForm.getForm().load({url:'interactive-website-template.xml', waitMsg:'Loading'});
});

productionForm.render('production');
Based on XML of this format: (each Stage will be a new form, but I'll worry about looping through the Stages after. Right now I am just worried about looping through the Tasks for a single form.)


<template>
<stages>

<stage>
<name>Pre-Production</name>
<tasks>
<task><![CDATA[Decision/Contact Person]]></task>
<task><![CDATA[Copy/Content]]></task>
<task><![CDATA[Logo]]></task>
</tasks>
</stage>

<stage>
<name>Production</name>
<tasks>
<task><![CDATA[Extranet Setup]]></task>
<task name="mocks1" id="mocks1"><![CDATA[Mocks Round#1]]></task>
<task><![CDATA[Mocks Round#2]]></task>
</tasks>
</stage>

</stages>
</template>Help would be greatly appreciated!! :) It took me like 6 hours just to figure it out to this extent.

Sammii
22 Feb 2011, 9:29 AM
I finally was able to make the XML loop to populate each field's value. This is the code I used:


var myItems = new Array();
var myName = new Array();
var mapping = new Array();

for (var i=1; i<6; i++){
myName[i] = 'task-'+i;
myItems.push({
xtype: 'textfield',
fieldLabel: 'Label #'+i,
labelSeparator: '',
name: myName[i],
id: 'template-'+i
});
mapping.push(
{name: myName[i], mapping: 'task:nth('+i+')'}
);
}

var productionForm = new Ext.FormPanel({
labelWidth: 100,
id: 'productionform',
frame: true,
title: 'Production',
bodyStyle: 'padding: 5px 5px 5px 5px',
collapsible: true,
collapsed: false,
defaults: {width: 230},
reader : new Ext.data.XmlReader({
record: 'tasks',
success: '@success',
},
mapping
),
items: myItems,
buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});

productionForm.addButton('Load', function(){
productionForm.getForm().load({url:'interactive-website-template.xml', waitMsg:'Loading'});

});

productionForm.render('production');

productionForm.on({
actioncomplete: function(form, action){
if(action.type == 'load'){
var contact = action.result.data;
}
}
});

However, I still have no idea how to grab records from my XML to generate dynamic labels for my form fields. Right now the labels are static, but I would love to have each "task" from my XML be the label. Example: "Decision/Contact Person"

Help would be appreciated please. :(