Extjs 将表单绑定到具有关联的模型

Question

我有以下 JSON 结构：

userAuth
----userAccount -- hasOne
----userAccountDetails -- hasMany

我想显示一个表单，该表单显示来自 userAuth 和 userAccount 的数据，然后是一个网格，其中 userAccountDetails 中的每一行都有一行

这是 userAuth 模型的代码：

Ext.define('xxxx.model.UserAuth', {
    extend: 'Ext.data.Model',

    fields: [
       { name: 'id' },
       { name: 'email' },
       { name: 'userName' },
       { name: 'refIdStr' },
       { name: 'displayName' },
       { name: 'modifiedDate', type: 'date', }
    ],

    requires: [
        'xxxx.model.UserAccount',
        'xxxx.model.UserAuthDetails',
    ],

    hasMany: [
        {
            model: 'xxxx.model.UserAuthDetails',
            name: 'authDetails',
            foreignKey: 'userAuthId',
            associationKey: 'userAuthDetails',

        }
    ],

    hasOne: [
        {
            model: 'xxxx.model.UserAccount',
            name: 'userAcount',
            associationKey: 'userAccount',
            getterName: 'getUserAccount',
            setterName: 'setUserAccount',
        }
    ],

    proxy: {
        type: 'ajax',
        startParam: 'skip',
        limitParam: 'take',
        url: settings.ApiUrl + '/model/UserAuth/?format=json',
        baseParams: {
            skip: '0',
            take: '10',
        },
        reader: {
            type: 'json',
            root: 'results',
            successProperty: 'success',
            totalProperty: 'totalCount'
        }
    }
});

和 userAccount 模型

Ext.define('xxxx.model.UserAccount', {
    extend: 'Ext.data.Model',
    fields: [
       { name: 'username' },
       { name: 'id' },
       { name: 'name' },
       { name: 'email' },
       { name: 'slug' },
       { name: 'facebookId' }
    ],

    belongsTo: 'xxxx.model.UserAuth',

    proxy: {
        type: 'ajax',
        startParam: 'skip',
        limitParam: 'take',
        url: settings.ApiUrl + '/model/UserAccount/?format=json',
        baseParams: {
            skip: '0',
            take: '10',
        },
        reader: {
            type: 'json',
            root: 'results',
            successProperty: 'success',
            totalProperty: 'totalCount'
        }
    }
});

和 userAuthDetails：

Ext.define('xxxx.model.UserAuthDetails', {
    extend: 'Ext.data.Model',
    fields: [
       { name: 'id' },
       { name: 'userAuthId' },
       { name: 'provider' },
       { name: 'userId' },
       { name: 'userName' },
       { name: 'displayName' },
       { name: 'firstName' },
       { name: 'lastName' },
       { name: 'email' },
       { name: 'modifiedDate' },
       { name: 'provider' },
    ],

    belongsTo: [
        {
            model: 'xxxx.model.UserAuth',
            isntanceName: 'userAuth',
            getterName: 'getUserAuthDetails',
            setterName: 'setUserAuthDetails',
            associationKey: 'userAuthDetails'
        }
    ],

    proxy: {
        type: 'ajax',
        startParam: 'skip',
        limitParam: 'take',
        url: settings.ApiUrl + '/model/UserAuthDetails/?format=json',
        baseParams: {
            skip: '0',
            take: '10',
        },
        reader: {
            type: 'json',
            root: 'results',
            successProperty: 'success',
            totalProperty: 'totalCount'
        }
    }
});

加载商店有效并且关联有效 - 当我调用 record.getUserAccount().get('email') 时，它会返回我所期望的 - 所以一切正常。

现在，我的问题是 - 我到底是如何将这些数据转换为上述形式的？

我尝试过这样做：

{
    xtype: 'textfield',
    fieldLabel: 'username',
    allowBlank: false,
    maxLength: 100,
    name: 'userAccount.userName'
}

认为关联名称可能是一个很好的提示 - 但这不起作用......

来自最高模型 (userAuth) 的数据工作正常 - 我似乎无法提取 hasOne 进入表格。

我什至还没有尝试将 userAuthDetails 绑定到网格，但我怀疑这同样具有挑战性

有没有人设法让它工作？我只走关联路线，因为我认为它会使这类东西更清洁/更简单！

[编辑]

放弃尝试使用表单执行此操作，因为我很高兴这些数据现在只能读取。我现在正尝试在行扩展器内的 xtemplate 中显示这些数据。

我尝试了以下方法，但它不起作用！！！

plugins: [
    {
        ptype: 'rowexpander',
        rowBodyTpl: [
            '<p><b>Username:</b> {userName}</p>',
            '<p><b>Email:</b> {userAccount.email}</p>',
            '<tpl for="userAuthDetails">',
                 '<p>{provider}</p>',
            '</tpl>'
        ]
    }],

我需要什么样的巫术才能完成这项工作？一点都不明显！！！

ATM 我想我不会再使用 ExtJs 了——我最近发现自己陷入了太多这样的黑洞，事情显然应该按照你所期望的方式工作——只要谷歌搜索就可以看出每个人都期望这个工作。我已经断断续续地使用 ExtJs 多年了，但我认为现在是时候最终承认有更好的 js 应用程序框架了。

Answer 1

不幸的是，没有自动的、仅配置的方式来做到这一点。如果您查看loadRecord 源代码，您会发现它只是从传递的记录中获取数据并在表单上调用setValues。

您需要重写 loadRecord 方法以从关联记录中挖掘所需的值。