Create dynamic form fields from datasource

[crosslink06]

Hi all,

I use a list component to list items with a JSON web service in ASP.Net as datasource.
When clicking on the disclosure icon, I get more details in the second panel template; something like:


<FormFieldCollection><Items><FormField><FormId>239</FormId><FieldSet>Your Information</FieldSet><DataType>Text</DataType><DataTypeModifier /><DisplayName>First Name</DisplayName><FieldName>firstname</FieldName><Choices /><DefaultValue /><Visibility>Visible</Visibility><ColumnCount>1</ColumnCount><IsRequired>True</IsRequired><FieldValue /><CreateDate>6/23/2011 5:23:14 PM</CreateDate><UpdateDate>6/23/2011 5:23:14 PM</UpdateDate><DisplayOrder>1</DisplayOrder><CssClasses /><IsConditional>False</IsConditional><ConditionalField /><ConditionalValue /><ConditionalFieldset /><ConditionalFieldsetValue /></FormField></Items></FormFieldCollection>

I would like to be able to recreate this form and all the others according to data I get.
Do you guys have any tricks about how I could do that in Sencha?

Thanks for your help
;)

[mitchellsimoens]

This is pretty easy.. you just have to traverse the XML and setup your fields based on the XML structure. There is nothing built in that will do this for you but it's actually pretty easy.

[crosslink06]

This is pretty easy.. you just have to traverse the XML and setup your fields based on the XML structure. There is nothing built in that will do this for you but it's actually pretty easy.

Thank you mitchellsimoens.

The thing is that I don't know first how I can pass the value of my template item into a variable. Something like: var formfields = {FormField}.

Also, I am able to parse a XML file via a XmlStore that I bind to a panel container, my problem is to bind my panel to a string formed as a XML file.

Here is my code:

Ext.regModel('FormXml', {
fields: ['FormId', 'FieldSet', 'DisplayName', 'FieldName', 'DataType', 'CreateDate', 'DisplayOrder']
});

function createXMLDoc(xmlString) {
var xmlDocument;

if (Ext.isIE) {
xmlDocument = new ActiveXObject("Microsoft.XMLDOM");
xmlDocument.async = "false";
xmlDocument.loadXML(xmlString);
}
else if (Ext.isGecko) {
var parser = new DOMParser();
xmlDocument = parser.parseFromString(xmlString, "text/xml");
}
else {
xmlDocument = null;
};


return xmlDocument;
};


var xml = '<Items><FormField><FormId>191</FormId><FieldSet>Your Information</FieldSet><DisplayName>First
Name</DisplayName><FieldName>firstname</FieldName><DataType>Text</DataType><CreateDate>9/23/2009 8:32:46 AM</CreateDate><DisplayOrder>1</DisplayOrder></FormField></Items>';
var xml2 = '<Items><FormField><FormId>191</FormId><FieldSet>Your Information</FieldSet><DisplayName>First Name</DisplayName><FieldName>firstname</FieldName><DataType>Text</DataType><CreateDate>9/23/2009 8:32:46 AM</CreateDate><DisplayOrder>1</DisplayOrder></FormField></Items>';

Form.StoreFormDetails = new Ext.data.XmlStore({
model: 'FormXml',
autoLoad: true,
proxy: {
type: 'memory',
headers: { 'Content-Type': 'application/xml; charset=utf-8' },
reader: new Ext.data.XmlReader ({
type: 'xml',
root: 'Items',
record: 'FormField'
})
}
});


Form.StoreFormDetails.loadData(createXMLDoc(xml));

(...)

Form.detailPanel = new Ext.Panel({
id: 'detailpanel',
items: new Ext.DataView({
store: Form.StoreFormDetails,
tpl: tpl,
itemSelector: 'div.thumb-wrap'
}),

dockedItems: [Form.detailToolbar]
});

Also, I want to make it works on webkit browsers so I think my approach is not correct.

Thanks for your help