Как создать динамическую (на лету) форму в Sencha Touch

Question

Я работаю в sencha touch ap, и мне нужно сгенерировать виды с динамическими формами.

Конфигурация исходит из внутреннего интерфейса (JSON) и в зависимости от этого я пишу компонент или другой .. например:

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

где тип связан xtype в Сенчи.

В представлении я создаю все варианты полей:

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

И я получаю конфигурацию с сервера, я понимаю, мнение, как хранилище различных полей, и от контроллера, он должен добавить только поля, заданные в объекте json.

Как создать динамически следующую концепцию MVC?

Спасибо

Answer 1

Я не знаю, о Touch, но в ExtJS, я обычно делаю это с помощью add функцию fieldset. Вы просто просматриваете все свои записи и создаете поля на лету.

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

Затем установить правильные параметры конфигурации на field затем

formFieldset.add(field); 

Answer 2

Я предполагаю, что у вас есть все поля в 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(); 
    } 

Answer 3

Основываясь на моем комментарии на ваш вопрос, моя идея о динамической генерации формы использует синтаксис ExtJS для загрузки определения формы будет что-то вроде кода ниже; конечно, он будет расширен и данные могут быть загружены с сервера.

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

}); 

обновление:

При создании вида в перспективе времени, связь между представлением и контроллером может быть проблематичной, поскольку контроллер ничего не знаю о представлении не знает. учитывая, что контроллер отвечает за инициализацию представления соответствующими данными и обработкой событий просмотра, механизм привязки данных в ExtJS может решить первую часть (инициализацию представления), которая описана в View Models and Data Binding, вторая часть (события обработки событий) может быть решена с помощью общих методов в контроллере каждый элемент в представлении должен отправить свое событие некоторым конкретным методам, и методы, основанные на параметрах, должны решить, что делать.

Этот подход делает ваши методы в контроллере немного толстыми и сложными, что является ценой наличия динамической формы.

Следует отметить, что EXTJS вызывает различные события в жизненном цикле контроллеров и представлений, и вы должны использовать их для управления своей динамической формой.