Question

我是ExtJS的新手，我正在构建一个“用户管理”应用程序。我的观点与此类似：

enter image description here

如您所见，我的视图顶部有一个组合框，其中包含一个用户名列表。这个组合框是从商店（使用非常简单的模型）填充的。该商店使用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的其他使用者有用）。这会导致在表单中显示数据或将数据保存回服务器时出现任何问题吗？

Answer 1

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

然后，我在组合上安装一个select侦听器，它接收选定的记录作为参数。在听众中，我打电话给

form.loadRecord(record);

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

这样可以节省一次服务器往返，但代价是更长的初始组合商店响应，代码变得非常简单。

Answer 2

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

this.getView().loadRecord()将有效。

将JSON数据加载到ExtJS中的表单中

2 个答案: