我有一个用于显示发票信息的网格.使用Invoice商店填充网格,Invoice商店使用Invoice模型,Invoice模型与InvoiceStatus模型具有“has one”关联,主键为“id”,foren键为“invoice_status_id”.

问题

我不确定如何使Invoice Grid的’Status’列的显示值使用invoice_status_id插入的关联模型’name’.我知道我需要创建一个渲染器来执行此操作,但我仍然得到一个空值. Invoice和InvoiceStatus存储都使用正确的值填充.

状态列渲染

renderer: function(value,MetaData,record,rowIndex,colIndex,store,view) {
    return record.getStatus().get('name');
},

发票商店

Ext.define('MyApp.store.Invoice',{
    extend: 'Ext.data.Store',requires: [
        'MyApp.model.InvoiceModel'
    ],constructor: function(cfg) {
        var me = this;
        cfg = cfg || {};
        me.callParent([Ext.apply({
            autoLoad: true,autoSync: true,model: 'MyApp.model.InvoiceModel',remoteSort: true,storeId: 'StoreInvoce',proxy: {
                type: 'rest',url: '/api/invoice',reader: {
                    type: 'json',root: 'data'
                }
            }
        },cfg)]);
    }
});

InvoiceStatus商店

Ext.define('MyApp.store.InvoiceStatus',alias: 'store.InvoiceStatus',requires: [
        'MyApp.model.InvoiceStatus'
    ],model: 'MyApp.model.InvoiceStatus',storeId: 'MyJsonStore1',url: '/api/invoice_status',cfg)]);
    }
});

发票模型

Ext.define('MyApp.model.InvoiceModel',{
    extend: 'Ext.data.Model',uses: [
        'MyApp.model.InvoiceStatus'
    ],fields: [
        {
            mapping: 'id',name: 'id',type: 'int'
        },{
            mapping: 'client_id',name: 'client_id',{
            mapping: 'client_name',name: 'client_name',type: 'string'
        },{
            dateFormat: 'Y-m-d',dateReadFormat: '',mapping: 'issue_date',name: 'issue_date',sortType: 'asDate',type: 'date'
        },mapping: 'due_date',name: 'due_date',{
            mapping: 'payment_date',name: 'payment_date',type: 'date',useNull: true
        },{
            name: 'amount'
        },{
            mapping: 'invoice_status_id',name: 'invoice_status_id',sortType: 'asInt',type: 'int'
        }
    ],hasOne: {
        model: 'MyApp.model.InvoiceStatus',foreignKey: 'invoice_status_id',getterName: 'getStatus'
    }
});

InvoiceStatus模型

Ext.define('MyApp.model.InvoiceStatus',{
            mapping: 'name',name: 'name',type: 'string'
        }
    ]
});

发票网格

Ext.define('MyApp.view.ApplicationViewport',{
    extend: 'Ext.container.Viewport',requires: [
        'MyApp.view.ClearTriggerField'
    ],layout: {
        type: 'border'
    },initComponent: function() {
        var me = this;

        Ext.applyIf(me,{
            items: [
                {
                    xtype: 'header',region: 'north',height: 100,items: [
                        {
                            xtype: 'image',width: 250,alt: 'logo',src: 'images/logo.gif',title: 'logo'
                        }
                    ]
                },{
                    xtype: 'container',region: 'center',layout: {
                        type: 'card'
                    },items: [
                        {
                            xtype: 'container',width: 150,layout: {
                                type: 'border'
                            },items: [
                                {
                                    xtype: 'gridpanel',collapseMode: 'mini',region: 'west',split: true,autoRender: false,maxWidth: 300,bodyBorder: false,animCollapse: false,collapsed: false,collapsible: true,hideCollapseTool: true,overlapHeader: false,titleCollapse: true,allowDeselect: true,columnLines: false,forceFit: true,store: 'ClientDataStor',dockedItems: [
                                        {
                                            xtype: 'toolbar',dock: 'top',items: [
                                                {
                                                    xtype: 'cleartrigger'
                                                },{
                                                    xtype: 'tbfill'
                                                },{
                                                    xtype: 'button',icon: '/images/settings.png'
                                                }
                                            ]
                                        }
                                    ],columns: [
                                        {
                                            xtype: 'templatecolumn',tpl: [
                                                '<img class="pull-left client-menu-image" src="/images/{type}.png"><div class="client-menu-name">{name}</div><div class="client-menu-type">{type}</div>'
                                            ],dataIndex: 'id',text: 'Client'
                                        }
                                    ],selModel: Ext.create('Ext.selection.RowModel',{

                                    }),plugins: [
                                        Ext.create('Ext.grid.plugin.BufferedRenderer',{

                                        })
                                    ]
                                },{
                                    xtype: 'gridpanel',title: 'Invoices',titleCollapse: false,store: 'Invoice',columns: [
                                        {
                                            xtype: 'numbercolumn',maxWidth: 120,minWidth: 50,groupable: false,lockable: true,text: 'ID',tooltip: 'Invoice ID',format: '0'
                                        },{
                                            xtype: 'numbercolumn',hidden: true,dataIndex: 'client_id',groupable: true,text: 'Client ID',{
                                            xtype: 'gridcolumn',renderer: function(value,view) {
                                                return record.getStatus().get('name');
                                            },maxWidth: 200,minWidth: 100,dataIndex: 'invoice_status_id',text: 'Status'
                                        },{
                                            xtype: 'datecolumn',dataIndex: 'issue_date',text: 'Issue Date',format: 'd M Y'
                                        },dataIndex: 'due_date',text: 'Due Date',dataIndex: 'payment_date',text: 'Payment Date',{
                                            xtype: 'templatecolumn',summaryType: 'sum',maxWidth: 150,tpl: [
                                                '${amount}'
                                            ],defaultWidth: 80,dataIndex: 'amount',text: 'Amount'
                                        }
                                    ],features: [
                                        {
                                            ftype: 'grouping'
                                        }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        });

        me.callParent(arguments);
    }

});