How to create a dynamic (on the fly) form in Sencha Touch

Question

I am working in a sencha touch ap and I need to generate views with dynamic forms.

Configuration comes from the backend (JSON) and depending of this I paint a component or other.. for example:

 "auxiliaryGroups": [
      {
        "id": "1000",
        "name": "Basic Data",
        "fields": [
          {
            "id": "1001",
            "name": "Company name",
            "editable": true,
            "mandatory": true,
            "calculation": true,
            "internalType": "T",
            "type": "textfield",
            "options": []
          }
        ]
      }
    ],

Where type is related xtype in Sencha.

In the view I am creating all options of fields:

      {
        xtype : 'fieldset',
        itemId: 'auxiliaryFieldsGroup3',
        title: 'Requirements',
        //cls   : 'headerField',
        items:[
          {
            xtype: 'togglefield',
            name: 'f6',
            label: 'Auxiliary field R1'
          },
          {
            xtype: 'selectfield',
            name: 'f10',
            label: 'Auxiliary field R5',
            placeHolder: 'Select one..',
            options: [
              {text: 'First Option',  value: 'first'},
              {text: 'Second Option', value: 'second'},
              {text: 'Third Option',  value: 'third'}
            ]
          },
          {
            xtype: 'textfield'
          }  
        ] 
      }

And I receive the configuration from the server, I understand the view like a store of different fields, and from the controller, it should add only fields specified in the json object.

How to create this dynamically following MVC concept?

Thank you

Answer 1

I assume that you have all the fields in the auxiliaryGroups.fields array. After loading the form data from AJAX you can do it like this in your success call.

  succses:function(response){
   var response = Ext.decode(response.responseText);
   var fields = response.auxiliaryGroups.fields;
   var form = Ext.create("Ext.form.Panel",{
                                   // here your form configuration.
                                    cls:"xyz"
                                  });
   Ext.Array.forEach(fields,function(field){
      var formField = {
          xtype: field.type,
          label: field.name,
          name: field.id
       };
       form.add(formField);
   });

   Ext.Viewport.add(form);
   form.show();
  }

Answer 2

Based on my comment on your question, my idea about dynamic form generation is using ExtJS syntax to load form definition would be something like the code below; of course it would be extended and the data can be loaded from the server.

Ext.require([
  'Ext.form.*'
]);

Ext.onReady(function() {
  var data = [{
    fieldLabel: 'First Name',
    name: 'first',
    allowBlank: false
  }, {
    fieldLabel: 'Last Name',
    name: 'last'
  }, {
    fieldLabel: 'Company',
    name: 'company'
  }, {
    fieldLabel: 'Email',
    name: 'email',
    vtype: 'email'
  }, {
    xtype: 'timefield',
    fieldLabel: 'Time',
    name: 'time',
    minValue: '8:00am',
    maxValue: '6:00pm'
  }];

  var form = Ext.create('Ext.form.Panel', {
    frame: true,
    title: 'Simple Form',
    bodyStyle: 'padding:5px 5px 0',
    width: 350,
    fieldDefaults: {
      msgTarget: 'side',
      labelWidth: 75
    },
    defaultType: 'textfield',
    defaults: {
      anchor: '100%'
    }
  });

  form.add(data);
  form.render(document.body);

});

update:

When you create a view in run-time, communication between view and controller might be problematic because the controller doesn't know anything about the view. considering that the controller is responsible for initializing the view with appropriate data and handling view's events, data binding mechanism in ExtJS can solve the first part (initializing the view) which is described at View Models and Data Binding, the second part (handling view's events) can be solved with general methods in the controller, every element in the view should send its event to some specific methods and the methods based on the parameters should decide what to do.

This approach makes your methods in the controller a little fat and complicated that is the price of having dynamic form.

It is worth to mention that EXTJS raises different events in the life cycle of controllers and views and you should take benefit of them to manage your dynamic form.

Answer 3

I don't know about Touch, but in ExtJS, I usually do it by using the add function of a fieldset. You just loop through all your records, and create the fields on the fly.

var field = Ext.create('Ext.form.field.Text'); //or Ext.form.field.Date or a number field, whatever your back end returns.

Then set correct config options on field then

formFieldset.add(field);