0

我想在 datalist 上获取 belongsTo 记录并显示父记录字段。

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 

请帮我解决这个问题。

4

1 回答 1

1

我建议阅读这篇文章,它很长,但最后的列表部分与您的示例相似。

我认为关键是你不需要单独的商店。Sencha 将在关联的后面自动创建这些。确保将代理移动到模型上并设置 autoLoad: true

于 2012-12-25T22:26:52.740 回答