由商店生成/驱动的 ExtJS 5.0 表单答案

【问题标题】：ExtJS 5.0 Forms generated/driven by a store由商店生成/驱动的 ExtJS 5.0 表单
【发布时间】：2014-11-11 01:41:09
【问题描述】：

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

基本上这是一个搜索面板，您可以在其中定义搜索条件。每个条件都包含：字段名称选择器、运算符选择器和用于编写/选择条件操作数的小部件。例如搜索以下人员：

以 Joe 开头的名称（FieldName:name, operator:starting with, widget:textfield)
1980.01.01 前的生日。（字段名：生日，操作员：之前，小部件：日期选择器）

我以 JSON 格式获取条件，并将它们加载到存储中。我想基于这个商店动态生成表单，在表单中进行修改，并要求商店提供一个带有修改（新条件等）的新 JSON。

第一步我遇到了问题：只需根据商店内容生成表单小部件。

如何做到这一点？

【问题讨论】：

标签： extjs5 extjs-stores extjs-form

【解决方案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 数据呈现表单。

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

【讨论】：