0

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

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

  • 以 Joe 开头的名称（字段名称：名称，运算符：开头，小部件：文本字段）
  • 1980.01.01 之前的生日。（字段名：生日，操作员：之前，小部件：日期选择器）

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

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

如何才能做到这一点？

4

1 回答 1

0

我这里假设 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 数据呈现表单。

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

于 2014-11-10T17:41:09.010 回答