Dynamically creating a form with correct field list

[LeibNiZ]

Hi,

I'm new to ExtJs and I want to create a simple form with a couple of fields to edit let's say the properties of an object like an new paper article. This object has a couple of properties like an author, a publication date, the actual content, and so on... I need to be able to create a form with the correct field list, to load the data from an XML file and to submit the changes (if there is) back to the server. This is not so complicated but the tricky part is to make a generic form so that it can create and load data from other objects as well.

For example, let's say we have 2 objects, an article and a photo. Both derive from a super class "Asset" that has generic attributes but they also have different attributes like "Author" for the Article and "Size" for the Photo.

The problem is quite simple, is it possible to create such a form ? taking an XML as input with the field list like

<Fields>
<Field id="1">
<Name>Author</Name>
<Type>string</Type>
</Field>
...
</Fields>

Thx in advanced,
LeibNiZ

[SeaSharp]

I suggest that you have a play with the excellent interactive form builder application available in the examples forum. When you have manually assembled a form that fits one of your example XML documents click on the button that generates an array of form elements in JSON and study the format.

You should then see how you could iterate over an XML doc and programmatically generate a suitable array of form JSON elements.

If the XML doc source is the web server, why not build the form element array server-side using a proper compiled language, then ship the form element array to the browser and instantiate the form.

[LeibNiZ]

Yeah I know i can build the proper XML file containing the definition for the fields because each asset (Article, Photo) know their own fields. But what about the ExtJs script itself ? He must too know what the fields will actually be and what type they will be. If we look at this example :

// configure how to read the XML Data
reader : new Ext.data.XmlReader({
record : 'contact',
success: '@success'
}, [
{name: 'first', mapping:'name/first'}, // custom mapping
{name: 'last', mapping:'name/last'},
'company', 'email', 'state',
{name: 'dob', type:'date', dateFormat:'m/d/Y'} // custom data types
]),This construct a XmlReader with the appropriate fields but I don't know what the fields will be.
And below he defines a FieldSet with some textFields in it corresponding to the fields of the XML file.

items: [
new Ext.form.FieldSet({
title: 'Contact Information',
defaultType: 'textfield',
items: [{
fieldLabel: 'First Name',
name: 'first',
width:190
}, {
fieldLabel: 'Last Name',
name: 'last',
width:190
...

So these 2 sections must go and be built on the fly because maybe the next asset will have
5 email fields that I want validation on.

I hope you understand what I'm trying to accomplish :P

[Animal]

You want a code generation tool that will parse an XML form definition and output Ext code to create the form.

I don't think anyone has written a tool like that yet.

Give it a go. Shouldn't be too difficult with Java.

[Animal]

Or, you could do the whole thing in the browser, pull in the XML, unroll it into a Store, each Record of which contains the full field definition.

Loop through the Records or the Store, creating Ext.form.Fields from the properties, and pushing them onto an Array. At the end create a FormPanel with that Array as its items config.

That shouldn't be too difficult either.

[LeibNiZ]

thx i'll give it a shot !