javascript - 如何在 Sencha Touch 中创建动态(即时)表单

Question

我正在使用 sencha touch ap，我需要使用动态表单生成 View 。

配置来自后端(JSON)，根据此我绘制一个组件或其他组件......例如:

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

其中 type 与 Sencha 中的 xtype 相关。

在 View 中我正在创建字段的所有选项:

      {
        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'
          }  
        ] 
      }

我从服务器接收配置，我将 View 理解为不同字段的存储，并且从 Controller ，它应该仅添加 json 对象中指定的字段。

如何创建这个动态遵循 MVC 概念？

谢谢

Answer 1

我假设您拥有 auxiliaryGroups.fields 数组中的所有字段。从 AJAX 加载表单数据后，您可以在成功调用中执行此操作。

  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();
  }