由存储生成/驱动的ExtJS 5.0表单

Question

我想在ExtJS 5.0中创建一个完全基于商店的表单。每个存储项都表示“表单中的行”。“行”由三个或更多个表单小部件组成。

基本上这是一个搜索面板，您可以在其中定义搜索条件。每个条件都由: FieldName选择器、操作符选择器和用于编写/选择条件操作数的小部件组成。例如，搜索具有以下内容的人：

• 以Joe开头的名称(FieldName: name，operator:starting，widget:textfield)
• 1980.01.01年之前的出生日期。(FieldName:生日会，操作员:以前，小部件:datepicker)

我用JSON获取条件，并将它们加载到Store中。我希望基于这个存储动态生成表单，在表单中进行修改，并向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;
  }
})

这是一个简单的、精心设计的示例，但是它应该(在填入空白(例如缺少requires和自定义操作符小部件)之后)基于JSON数据呈现一个表单。

(我个人使用这种方法-我可以在一个简单的例子中展示出更复杂的-根据服务器提供的表单描述生成动态表单)