细节
我有一个用于显示发票信息的网格.使用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);
}
});
解决方法
原文地址：https://www.jb51.cc/js/155615.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
