1. #1
    Ext User
    Join Date
    May 2010
    Posts
    9
    Vote Rating
    0
    sixten2009 is on a distinguished road

      0  

    Default Dynamically add items to an empty FormPanel using JSON

    Dynamically add items to an empty FormPanel using JSON


    I have an empty FormPanel and I would like to add items to it dynamically depending on what the server returns using JSON. On the server I have an XML, in the XML I know exactly what types of element I got, I simply don't know their numbers, values and order - that's why I want to pick them up and render them dynamically. Example from the XML:

    <item uuid="example">
    <title type="textfield" label="Title">the title</title>
    <description type="textarea" label="Description">long text..</description>
    ...
    </item>

    <item uuid="another one">
    <title../>
    <author../>
    <description../>
    ...
    </item>

    On the server I use XSL to generate the JSON response (the * is used in the select because the number of elements and their order can vary):

    <xsl:for-each select="*">
    // get type, label and value for each element
    </xsl:for-each>

    And the result looks something like this:

    {xtype: "textfield", fieldLabel: "Random label", name: "whatever", text: "bla bla"}

    I have spent most of the day trying to get this to work without any success. Google does not find much - is this possible to achieve?

    Looking forward to any assistance that can help me make this work.

    Thanks,

    Sixten

    Edit: Found this post and a similar approach, but not a great deal of details to look into: http://stackoverflow.com/questions/2...ic-form-fields

  2. #2
    Sencha User darthwes's Avatar
    Join Date
    Mar 2010
    Posts
    633
    Vote Rating
    -11
    darthwes can only hope to improve

      0  

    Default


    man i really want a forum post that i can work on...oh this guy has a good ... oh he didn't read the sticky...

  3. #3
    Ext User
    Join Date
    May 2010
    Posts
    9
    Vote Rating
    0
    sixten2009 is on a distinguished road

      0  

    Default


    darthwes, and what would I have found in the sticky? I have read it and unfortunately I didn't find anything helpful that I could apply to my problem. Please enlighten me.

  4. #4
    Ext User
    Join Date
    May 2010
    Posts
    9
    Vote Rating
    0
    sixten2009 is on a distinguished road

      0  

    Default


    Nobody? I downloaded and installed Ext Designer and hoping to get some hints but no.. There is a JSON representation but I didn't get smarter on how to make use of it.

    Is it possible for a barebone FormPanel to load the lot over HTTP, get a JSON representation back from the server and have ExtJS render all the items and labels and what not?

    Am I trying to do what's impossible? I just need a hint if I am heading in the wrong direction.

    Thanks a lot,

    Sixten

  5. #5
    Sencha User
    Join Date
    Aug 2008
    Posts
    110
    Vote Rating
    0
    Rothariger is on a distinguished road

      0  

    Default


    i dont read all you have write above, so i would post a comment in what i undertand by your thread title....

    have you read this?

    http://www.extjs.com/deploy/dev/docs/output/Ext.Panel.html#method-Ext.Container-add

    panel.add function ?

  6. #6
    Ext User
    Join Date
    May 2010
    Posts
    9
    Vote Rating
    0
    sixten2009 is on a distinguished road

      0  

    Default


    Thanks for your reply Rothariger. Yes, I am aware of panel.add and even tested it with some static data, works nicely. But to use it a dynamic fashion I guess I need to load and store my "items" using Ext.data.Store and then iterate through all itemsand do a panel.add for each? - Will probably work, but is this the most elegant way of doing it? FormPanel loads JSON today without any problems..

    Edit: Instead of Ext.data.Store simply AJAX would do the trick, then I would have full control over it instead of having to comply with JSON (or any other format..).

  7. #7
    Sencha User
    Join Date
    Aug 2008
    Posts
    110
    Vote Rating
    0
    Rothariger is on a distinguished road

      0  

    Default


    no no...

    what you have is a string? maybe with a eval(string) is enough...

  8. #8
    Ext User
    Join Date
    May 2010
    Posts
    9
    Vote Rating
    0
    sixten2009 is on a distinguished road

      0  

    Default


    Got something working here now (adding items based on a JSON response from the server):

    Code:
    var form = new Ext.FormPanel({
      // straight forward, remember to leave out any items: [ ... ]
    });
    
    form.render(document.body);
    
    var ajax = Ext.Ajax.request({
      url: 'extjs-load.php',
      method: 'get',
      success: function(response) {               
        response = Ext.util.JSON.decode(response.responseText);
        for (i = 0; i < response.data.length; i++) {
          form.add({
            xtype: response.data[i].xtype,
            fieldLabel: response.data[i].title,
            name: response.data[i].name
          });
        }
        form.doLayout();
      }
    });
    The file extjs-load.php returns:
    Code:
    {
      success: true,
      data: [
        {xtype: "textfield", title: "label1", name: "textfield1"},
        {xtype: "textfield", title: "label2", name: "textfield2"},
        {xtype: "textfield", title: "label3", name: "textfield3"}
      ]
    }
    I have also verified that when posting the form FormPanel automatically and correct adds the newly added items:
    Code:
    textfield1=a&textfield2=b&textfield3=c
    Ok, this works but is there a better solution?

    Thanks,

    Sixten

  9. #9
    Sencha - Ext JS Dev Team evant's Avatar
    Join Date
    Apr 2007
    Location
    Sydney, Australia
    Posts
    16,997
    Vote Rating
    649
    evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute evant has a reputation beyond repute

      1  

    Default


    Code:
    form.add(Ext.decode(response.responseText).data);
    form.doLayout();
    Evan Trimboli
    Sencha Developer
    Twitter - @evantrimboli
    Don't be afraid of the source code!

  10. #10
    Ext User
    Join Date
    May 2010
    Posts
    9
    Vote Rating
    0
    sixten2009 is on a distinguished road

      0  

    Default


    Simply brilliant evant!