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

时间:2014-05-19 17:16:31

标签: extjs extjs-stores

我有以下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应用程序框架了。

1 个答案:

答案 0 :(得分:1)

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

您需要覆盖loadRecord方法以从相关记录中挖掘所需的值。