1. #1
    Ext User
    Join Date
    Nov 2007
    Posts
    8
    Vote Rating
    0
    LeibNiZ is on a distinguished road

      0  

    Question Dynamically creating a form with correct field list

    Dynamically creating a form with correct field list


    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

  2. #2
    Ext User
    Join Date
    Oct 2007
    Posts
    170
    Vote Rating
    0
    SeaSharp is on a distinguished road

      0  

    Default


    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.

  3. #3
    Ext User
    Join Date
    Nov 2007
    Posts
    8
    Vote Rating
    0
    LeibNiZ is on a distinguished road

      0  

    Default


    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

  4. #4
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    58
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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.

  5. #5
    Sencha - Ext JS Dev Team Animal's Avatar
    Join Date
    Mar 2007
    Location
    Notts/Redwood City
    Posts
    30,508
    Vote Rating
    58
    Animal has a spectacular aura about Animal has a spectacular aura about Animal has a spectacular aura about

      0  

    Default


    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.

  6. #6
    Ext User
    Join Date
    Nov 2007
    Posts
    8
    Vote Rating
    0
    LeibNiZ is on a distinguished road

      0  

    Default


    thx i'll give it a shot !

Thread Participants: 2