在ExtJS表单中实现复杂的数据结构

时间:2013-06-13 07:21:20

标签: forms extjs data-structures extjs4

我们的客户需要相当复杂的数据模型。这意味着数据模型不仅非常庞大(大约500-1000个字段,嵌套在许多对象中),它还需要随时发送和接收所有数据,这是一个字段变化的时间(在它失去焦点之后)。我们把它全部作为JSON。这是一个结构示例:

{
    data: {
        somefield: 'some content'
    },
    label: {
        somelabel: 'some label text'
    },
    applyable: {
        somefield: {
            visible: false
        }
    }
    someSubForm: {
        data: {
            somefield: 'some content'
        },
        label: {
            somelabel: 'some label text'
        },
        anotherSubForm: {
            data: {
                somefield: 'some content'
            },
            label: {
                somelabel: 'some label text'
            }
        }
    }
}

但这不是全部;该模型还包含标签,工具提示和其他配置。所有数据都需要显示在多个选项卡中,在这两个选项卡中可能会在两个不同的选项卡中显示相同的数据。由于所需的布局(由客户定义),表单将相互嵌套。

后端由我们的客户提供,因此我无法在此处进行任何更改。

我首先使用带有已定义代理的单个模型来加载JSON。但在那之后我遇到了几个问题。

首先,表单将始终跟踪所有字段,甚至是嵌套表单中的字段 其次是我无法更改任何标签或应用自定义设置 第三,由于大量数据,loadRecord()和getValues()方法运行时间很长。

我的问题是如何解决这个问题,以便每个表单只处理自己的数据,而不是所有数据,以及我如何应用自定义设置?

2 个答案:

答案 0 :(得分:3)

以下是我现在使用的解决方案:

首先是一些事实:

  1. 我将不得不涵盖多个R / W操作(特别是在每个更改和失去焦点的字段之后)
  2. 我总是在每个请求中获取所有数据
  3. 我必须涵盖大量数据(现场数据,商店数据,标签和配置)
  4. 我必须优化这个混乱才能成为关键性能
  5. 无法在服务器端会话中存储任何内容
  6. 这些表格彼此疯狂地嵌套,也可以拆分或存在两次
  7. 这就是我现在所做的事情:

    我删除所有关联,并决定只使用一个模型扩展一个模型,该模型使用修改后的getData方法,该方法支持自定义根属性,如someSubForm(请参阅问题中的示例代码)。这些字段配置为自动,因此需要对读取器或写入器进行更改。 也许不是坚如磐石但它有效。

    下一个大问题是形式。表单将始终尝试设置每个字段,即使它是另一种形式。另外我需要设置很多独立标签。所以我不能使用默认表格,我应该扩展吗?但是我该如何以及在哪里开始?经过长时间查看源代码后,在我看来我无法扩展所以我决定创建一个完全自定义的表单类以及自定义mixin类和自定义form.basic类。 为什么?因为我需要形成只查看直接放在这个表单中的字段,所以能够设置标签并将模型实例交给任何嵌套表单。

    有了这个,我现在可以使用自定义选择器注册我自己的监视器实例。哦,我忘了关于我新形式的第一件事;它由包含名称的属性(如someSubForm)绑定到实体。

    时使用
    1. 项目已添加到表单中
      • 任何字段都获得formId
      • 任何标签都会获得formId(不是绑定到表单的标签)
      • 任何表单获取parentFormId和实例
    2. 已设置监视器选择器
    3. 模型加载到表单
    4. 从模型中提取数据
    5. 其次是现在有3个监视器实例

      1. 使用也查找实体的新选择器收集所有字段。因此,任何子表单字段都会被忽略,因为它们有自己的实体
      2. 所有相同的标签
      3. 收集所有表格
      4. 第三种是修改后的loadRecord方法,该方法使用模型的新getData()方法,并将字段,标签和整个模型的特定数据设置为任何形式。

        总而言之,我的性能提升了800%。

答案 1 :(得分:2)

由于您无法拆分JSON,因此您需要一个用于webservice i / o的monolitic模型:这就是您已有的。

但是当用户使用数据时,您应该关注所需的数据,以减少加载和更新的时间。因此,我建议您定义其他模型和商店,支持每个标签或标签中的每个表单。鉴于您的数据样本,您可以例如创建一个表单模型,该表单模型是在您的大型i / o模型加载后(在回调中或您收听加载事件时)通过复制数据创建的。您甚至可以将这种代价高昂的复制操作推迟到用户打开相应选项卡的那一刻。

我看到有一个子表单,所以也许你可以尝试添加一个关联到表单模型本身。

Ext.define('YourApp.model.FormModel', {
extend: 'Ext.data.Model',
fields: [
    { name: 'data'},
    { name: 'label'}
],
associations: [ {
        type: 'hasMany',
        model: 'YourApp.model.FormModel',
        associationKey: 'someSubForm' 
    }
]
});