ExtJS load form items/fields from database

Question

Hello. I am using ExtJS 3 here. I would like to populate a formpanel from database with fields to be submitted. Basically, I don't know witch fields my form will have and I want to generate all formpanel items from database. I could generate a JSON string to be passed as the response from the PHP file with the fields and everything but I need to know how to work with this in ExtJS.

Any help ?

Thanks.

Answer 1

You're going to have to load and send the fields in a format ExtJS understands. The simplest way, if you don't mind coupling directly to the ExtJS format, would be to generate the ExtJS template style on the backend. In that case, your php script would generate something like this:

new Ext.form.FormPanel({
  width: 350,
  defaultType: 'textfield',
  items: [{
    xtype: '<?php echo $field ?>',
    value: '<?php echo $value ?>' 
  }]
});

Obviously, you could rearrange this so the "items" array is built up beforehand in a loop, and you can add as many items as you need.

Also, depending on how you set this up, you can also just return the array of items and add them to the form on the fly, removing the need to send the "new Ext.form.. etc" portion, and decoupling your code a little better. Personally, that's the way I'd go.

Edit:

In reply to your comment, if you return the JSON array in a proper ExtJS structure, all you'll need to do is use the "panel.add(myItems);" [1] method, and possibly a call to "panel.doLayout();" to force it to re-render nicely.

Check out the details on "components" [2] for how the xtype works.

[1] http://www.extjs.com/deploy/dev/docs/?class=Ext.form.FormPanel

[2] http://www.extjs.com/deploy/dev/docs/?class=Ext.Component