ExtJS 5.0 Forms generated/driven by a store

Question

I would like to create a Form in ExtJS 5.0 completely based on a Store. Every store item represents a "line in the form". A "line" consists three or more form widgets.

Basically this is a search panel, where you define search conditions. Every condition consits of: FieldName selector, an operator selector, and a widget to write/select a condition operand. For example search for people with:

name starting with Joe (FieldName:name, operator:starting with, widget:textfield)
birtday before 1980.01.01. (FieldName:birthday, operator:before, widget:datepicker)

I get the conditions in JSON, and load them in a Store. I would like to dynamically generate the form based on this store, make modifications in the form, and ask the Store for a new JSON with the modifications (new conditions, etc).

I have problems with the first step: simply generate form widgets based on store content.

How can this be done?

score 0 · Answer 1 · answered Nov 10 '14 at 17:41

I'm going to assume here that the JSON data represents a variety of dynamic data, and you can't simply use a pre-canned control like a grid, or a fixed form.

What you need to do is to make your own container class, which dynamically creates widgets based on the JSON content. You'll have to write this yourself, of course.

One extreme is to make your JSON content in the store be valid arguments to, say, Ext.widget - but that's probably not feasible, or even desirable.

For a more middling position, use the JSON data to determine, based on conditions, what widgets to add.

As a rough outline, you want something like this:

Ext.define('MyFormContainer', {
  extend: 'Ext.form.FormPanel',
  config: {
    // A store or MixedCollection of JSON data objects, keyable by id.
    formData: null
  },
  layout: 'vbox',
  initComponent: function() {
    this.callParent(arguments);
    this.getFormData().each(this.addField, this)
  },
  addField: function(fieldData) {
    var widgetConfig = this.buildWidgetConfig(fieldData);
    this.add(widgetConfig);
  },
  buildWidgetConfig: function(fieldData) {
    // The heart of the factory. You need a way to determine what sort of widget to make for
    // the field. For the example config, a fieldset with three fields would probably be
    // appropriate:
    var fieldSet = { xtype: 'fieldset', layout: 'hbox' };

    var items = [];

    items[0] = { xtype: 'textfield', name: fieldData['FieldName'] };
    // this would be a link to a custom widget to handle the operator. Or maybe you could
    // just spit out text, if it's not meant to be alterable.
    items[1] = { xtype: 'myoperator_' + fieldData['operator'], name: 'operator' };
    items[2] = { xtype: fieldData['widget'], name: 'value' }
    fieldSet.items = items;
    return fieldSet;
  }
})

This is a simple and contrived example, but it should (after you fill in the blanks, such as missing requires and the custom operator widgets) render a form based on the JSON data.

(I personally use this approach - with a great deal more sophistication that I can show in a simple example - to generate dynamic forms based on server-supplied form descriptions)

ExtJS 5.0 Forms generated/driven by a store

1 Answers1