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（）。

Answer 2

你的假设是错误的。您希望WebSite存储加载自身，但这不是它的工作方式。您可以做的是以下（这是未经测试的，但我在所有项目中都是这样做的）：

在您的客户网格中，为itemclick事件添加一个监听器，以调用以下方法（showWebSites）。它将接收包含所选APP.model.Client实例的选定客户端记录。然后，假设每个客户都有一组网站，该方法将加载APP.store.Websites商店，客户的网站将显示在您的视图中。

showWebSites: function (sender, selectedClient) {
    Ext.StoreManager.lookup('APP.store.Websites')
       .loadData(selectedClient.data.WebSites);
}

这就是方法。我希望你觉得它很有用。

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

2 个答案: