ExtJS 5.0 Формы, созданные/управляемые магазином

Question

Я хотел бы создать форму в ExtJS 5.0 полностью на основе магазина. Каждый элемент магазина представляет собой «строку в форме». «Строка» состоит из трех или более виджетов форм.

В основном это панель поиска, в которой вы определяете условия поиска. Каждое условие включает: Селектор FieldName, селектор оператора и виджет для записи/выбора операнда условия. Например, поиск людей с:

• имя, начиная с Джо (FieldName: имя, оператора: начиная с того, виджет: текстовое поле)
• birtday до 1980.01.01. (FieldName: birthday, operator: before, widget: datepicker)

Я получаю условия в JSON и загружаю их в магазин. Я хотел бы динамически генерировать форму, основанную на этом магазине, вносить изменения в форму и просить Store для нового JSON с изменениями (новые условия и т. Д.).

У меня проблемы с первым шагом: просто формировать виджеты формы на основе содержимого магазина.

Как это можно сделать?

Answer 1

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

Что вам нужно сделать, так это создать собственный контейнерный класс, который динамически создает виджеты на основе содержимого JSON. Конечно, вам придется написать это самостоятельно.

Одна из крайностей заключается в том, чтобы сделать ваш контент JSON в магазине допустимыми аргументами, например, Ext.widget - но это, вероятно, невозможно или даже желательно.

Для получения более средней позиции используйте данные JSON, чтобы определить, на основе условий, какие виджеты добавить.

В общих чертах, вы хотите что-то вроде этого:

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

Это простой и надуманный пример, но он должен (после заполнения пробелов, таких как отсутствие требует и пользовательского оператора виджеты) выставить форму на основе данных JSON.

(Я лично использую этот подход - с гораздо большей изощренностью, которую я могу показать в простом примере - для создания динамических форм на основе описаний форм на сервере)