在 ExtJS 中将 JSON 数据加载到表单中答案

【问题标题】：Loading JSON data into a form in ExtJS在 ExtJS 中将 JSON 数据加载到表单中
【发布时间】：2023-03-07 12:52:01
【问题描述】：

我对 ExtJS 还很陌生，我正在构建一个“用户管理”应用程序。我的观点与此类似：

如您所见，我的视图顶部有一个组合框，其中包含用户名列表。这个组合框是从商店填充的（它使用一个非常简单的模型）。商店使用 ajax 代理从服务器检索所有现有用户名的列表。当我的用户从组合框中选择用户名时，我想从我的服务器中检索所选用户名的用户帐户信息，并在我的组合框正下方显示的“帐户信息”表单中显示该信息。

这是我的组合框的模型和商店：

型号

Ext.define('UserMgmt.model.Username', {
    extend: 'Ext.data.Model',

    requires: [
        'Ext.data.Field'
    ],

    fields: [
        {
            name: 'id'
        },
        {
            name: 'name'
        }
    ]
});

商店

Ext.define('UserMgmt.store.Usernames', {
    extend: 'Ext.data.Store',

    requires: [
        'UserMgmt.model.Username',
        'Ext.data.proxy.Ajax',
        'Ext.data.reader.Json',
        'Ext.util.Sorter'
    ],

    constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            autoLoad: true,
            model: 'UserMgmt.model.Username',
            storeId: 'Usernames',
            proxy: {
                type: 'ajax',
                url: '/api/users',
                reader: {
                    type: 'json'
                }
            },
            sortOnLoad: true,
            sorters: {
                property: 'name',
                direction: 'ASC'
            }
        }, cfg)]);
    }
});

如您所见，我的组合框存储从 URL /api/users 检索完整的用户名列表（通过其 ajax 代理）。当我的用户从组合框中选择用户名时，我需要检索所选用户的帐户信息并用它填充我的表单字段。例如，如果我的用户在组合框中选择用户名“jsmith”，那么检索“jsmith”帐户信息的 URL 将是 /api/users/jsmith。

谁能告诉我如何进行 ajax 调用来检索特定用户的用户帐户信息，然后在我的表单字段中显示该信息？我应该为帐户信息创建一个模型并存储并将其与我的表单一起使用吗？如果是这样，我将如何动态设置/更新 URL 以从中检索个人用户帐户信息？

此外，特定用户帐户的 JSON 从服务器返回，如下所示：

{
  "userId" : 12345,
  "email" : "jsmith@gmail.com",
  "type" : "user",
  "permissions" : [],
  "unnecessaryField1" : "some_string_value",
  "unnecessaryField2" : "some_string_value",
  "accountLocked" : false,
  "name" : "jsmith",
  "lastLogin" : "4/29/2014 11:32:19 AM"
}

如您所见，JSON 中的某些字段对于我的目的来说是“不必要的”（但对 API 的其他使用者很有用）。这会导致在表单中显示数据或将数据保存回服务器时出现任何问题吗？

【问题讨论】：

更新和删除的url是什么，如果你能提供一个REST api（获取：/users/{userid}）而不是用户名，那真的很容易

标签： forms extjs model extjs4 store

【解决方案1】：

由于帐户信息不是很长，我可能会在组合加载时将其与用户名一起提供。组合的模型可以有很多字段，但组合本身只有两个（valueField，displayField）。

然后，我将在接收选定记录作为参数的组合上安装一个选择侦听器。在监听器中，我会调用

form.loadRecord(record);

如果表单和记录的字段名称相同，表单会自动填充值。

这会以更长的初始组合存储响应为代价为您节省一次服务器往返，并且代码将变得非常简单。

【讨论】：

【解决方案2】：

请从 Sencha 中找到以下关于您的问题的示例 - http://dev.sencha.com/ext/5.0.0/examples/kitchensink/#form-fieldcontainer

this.getView().loadRecord() 可以工作。

【讨论】：