EXTJS4 - 为什么我的关联商店不加载子数据？

Question

所以我有一个父母和儿童商店,如图所示:

父模型

Ext.define('APP.model.Client', {
    extend: 'Ext.data.Model',
    requires: [
        'APP.model.Website', 'Ext.data.association.HasMany', 'Ext.data.association.BelongsTo'],
    fields: [{
        name: 'id',
        type: 'string'
    }, {
        name: 'name',
        type: 'string'
    }, {
        name: 'slug',
        type: 'string'
    }, {
        name: 'active',
        type: 'boolean'
    }, {
        name: 'current',
        type: 'boolean'
    }],
    hasMany: {
        model: 'APP.model.Website',
        name: 'websites'
    }
});

儿童模特

Ext.define('APP.model.Website', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'id',
        type: 'string'
    }, {
        name: 'client_id',
        type: 'string'
    }, {
        name: 'sub_domain',
        type: 'string'
    }, {
        name: 'active',
        type: 'boolean'
    }],
    belongsTo: 'APP.model.Client'
});

通过服务器使用AJAX调用,我正在加载Clients商店,这是正常加载.但是Websites商店没有填充,当我在Clients商店on.load函数上断点时,为了查看它的填充内容,Client商店只填充了客户数据,但是在该raw商店的属性中,我可以看到所有的websites数据.所以它正确返回,但我的extjs不正确.这是商店:

客户端存储

Ext.define('APP.store.Clients', {
    extend: 'Ext.data.Store',
    autoLoad: false,
    model: 'APP.model.Client',
    proxy: {
        type: 'ajax',
        url: '/client/list',
        reader: {
            type: 'json',
            root: 'items'
        }
    },
    sorters: [{
        property: 'name',
        direction: 'ASC'
    }]
});

网站商店

Ext.define('APP.store.Websites', {
    extend: 'Ext.data.Store',
    requires: ['Ext.ux.Msg'],
    autoLoad: false,
    model: 'APP.model.Website',
    proxy: {
        type: 'ajax',
        url: '/client/list',
        reader: {
            type: 'json',
            root: 'items'
        },
        writer: {
            type: 'json'
        }
    },
    sorters: [{
        property: 'sub_domain',
        direction: 'ASC'
    }]
});

我的最终结果是......我想填充两个商店,以便我可以点击一个元素,当它从父商店加载东西时,我可以访问子商店(当我弄清楚时会有更多这个问题)在选项卡中填充几个网格.

就我的设置而言,我错过了什么？我刚刚在几天前下载了extjs4,所以我在4.1上.

Answer 1

将代理放在模型中,除非你有充分的理由不[1]

确保require相关模型位于同一文件中,或者在应用程序的早期版本中

使用foreignKey,如果你想随意(即后来的网络请求)来加载相关数据.

使用associationKey,如果相关的数据以相同的(嵌套的)响应装载

或者只使用两者

总是name你的关系(否则,如果使用命名空间,名称将是奇怪的).

始终在关系中使用属性的完全限定模型名称model

工作代码:

model/Contact.js:

Ext.define('Assoc.model.Contact', {
    extend:'Ext.data.Model',

    requires:[
    'Assoc.model.PhoneNumber' 
    ],

    fields:[
    'name' /* automatically has an 'id' field */
    ],

    hasMany:[
    {
        model:'Assoc.model.PhoneNumber', /*use the fully-qualified name here*/
        name:'phoneNumbers', 
        foreignKey:'contact_id',
        associationKey:'phoneNumbers'
    }
    ],

    proxy:{
    type:'ajax',
    url:'assoc/data/contacts.json',
    reader:{
        type:'json',
        root:'data'
    }
    }
});

model/PhoneNumber.js:

Ext.define('Assoc.model.PhoneNumber', {
    extend:'Ext.data.Model',

    fields:[
    'number',
    'contact_id'
    ],

    proxy:{
    type:'ajax',
    url:'assoc/data/phone-numbers.json',
    reader:{
        type:'json',
        root:'data'
    }
    }
});

数据/ contacts.json:

{
    "data":[
    {
    "id":1,
    "name":"neil",
    "phoneNumbers":[
    {
        "id":999,
        "contact_id":1,
        "number":"9005551234"
    }
    ]
    }
    ]

}

数据/电话numbers.json

{
    "data":[
    {
    "id":7,
    "contact_id":1,
    "number":"6045551212"
    },
    {
    "id":88,
    "contact_id":1,
    "number":"8009996541"
    },
    ]

}

app.js:

Ext.Loader.setConfig({
    enabled:true
});

Ext.application({

    requires:[
    'Assoc.model.Contact'
    ],

    name:'Assoc',
    appFolder:'Assoc',

    launch:function(){

    /* load child models that are in the response (uses associationKey): */
    Assoc.model.Contact.load(1, {
        success: function(record){
        console.log(record.phoneNumbers());
        }
    });

    /* load child models at will (uses foreignKey). this overwrites child model that are in the first load response */
    Assoc.model.Contact.load(1, {
        success: function(record){
        record.phoneNumbers().load({
            callback:function(){
            console.log(arguments);
            }
        });
        }
    });

    }
});

[1]商店将使用其模型的代理.如果需要,您始终可以覆盖商店的代理.如果模型没有代理,您将无法使用Model.load().