Sencha Touch принадлежит к ассоциации, использующей магазин на Datalist

Question

Я хочу, чтобы запись в принадлежащий объект была включена в список данных и отображены поля родительской записи.

Ext.define('MyApp.model.Customer', {
    extend: 'Ext.data.Model',

    config: {
        fields: ['Id', 
        'EMail'],   
        hasMany:  [{
            model: 'MyApp.model.OutstandingInvoice',
            name: 'OutstandingInvoice',
            primaryKey: 'Id',
            foreignKey: 'customerId',
            foreignStore: 'OutstandingInvoices'
        }]
    }
});

Ext.define('MyApp.model.OutstandingInvoice', {
    extend: 'Ext.data.Model',

    config: {
        fields: [
        'InvoiceDate', 
        'InvoiceID',
        'customerId'
        ],
        belongsTo: [{
            model: 'MyApp.model.Customer',
            name: 'Customer',
            primaryKey: 'Id',
            foreignKey: 'customerId',
            foreignStore: 'Customers'
        }]
    }
});


Ext.define('MyApp.store.OutstandingInvoices', {
    extend: 'Ext.data.Store',

    config: {
        model: 'MyApp.model.OutstandingInvoice',        
        storeId: 'OutstandingInvoiceStore',        
        proxy: {
            useDefaultXhrHeader: false,
            type: 'ajax',            
            url : 'http://localhost/getOutstandingInvoices',            
            reader: {
                type: 'json'
            }
        },
        autoLoad: false
    }
});


Ext.define('MyApp.store.Customers', {
    extend: 'Ext.data.Store',

    config: {
        model: 'MyApp.model.Customer',      
        storeId: 'CustomerStore',        
        proxy: {
            useDefaultXhrHeader: false,
            type: 'ajax',            
            url : 'http://localhost/getCustJList',
            reader: {
                type: 'json'
            }
        },
        autoLoad: false,
        sorters: [{
            property : 'FName',
            direction: 'ASC'
        }]
    }
});



Ext.define('MyApp.view.OutstandingInvoices', {
    extend: 'Ext.Panel',
    xtype: 'outstandingInvoicesXType',
    config: {
        cls : 'invoiceSummaryCls',
        scrollable: 'vertical',
        items: [
        {
            xtype: 'titlebar',
            docked: 'top',
            title: 'Outstanding Invoices'
        },
        {
            xtype : 'list',
            scrollable: false,
            store: 'OutstandingInvoiceStore',
            cls : 'p10',
            itemTpl: [
            '<div>Invoice # {InvoiceID}</div>',
            '<div>{InvoiceDate}</div>',        
            '<div>{Customer.Email}</div>', // I want to show Customer name here as its belongsTo Customer
            ],
            listeners: {
                itemtap:function (list, index, targe, rec, e, eOpts) {                    
                    console.log(rec)
                }
            }
        }
        ] 
    }

});

Я хочу показать имя клиента в списке данных, но возникли проблемы с ассоциацией или Xtemplate. Я получаю эту ошибку

Uncaught Error: [ERROR][Ext.XTemplate#apply] Cannot read property 'Email' of undefined 

Пожалуйста, помогите мне в этом.

Answer 1

Я бы порекомендовал прочитать эту статью, она довольно длинная, но последний раздел списка похож на ваш пример.

Я думаю, что ключевым моментом является то, что вам не понадобятся отдельные магазины. Сенча собирается создать их автоматически за пределами ассоциаций. Убедитесь, что вы перемещаете прокси на модели и устанавливаете autoLoad: true