EXT JS 4 使用模型关联来渲染网格显示值 [英] EXT JS 4 use an model association to render a grid display value
问题描述
我有一个用于显示发票信息的网格.使用 Invoice 存储填充网格，Invoice 存储使用 Invoice 模型，Invoice 模型具有有一个"模型.与 InvoiceStatus 模型关联，主键为id"，前键为invoice_status_id".
I have a grid used to display invoice information. The grid is populated using the Invoice store, the Invoice store uses the Invoice model, the Invoice model has a "has one" association with the InvoiceStatus model with a primary key of 'id' and a foren key of 'invoice_status_id'.
我不确定如何使发票网格的状态"列的显示值使用invoice_status_id 插入的关联模型名称".我知道我需要创建一个渲染器来做到这一点，但是我仍然得到一个空值.Invoice 和 InvoiceStatus 存储区都填充了正确的值.
I'm not sure how to make the display value of the Invoice Grid's 'Status' column use the associated models 'name' inserted of the invoice_status_id. I know I need to create a renderer to do this however I still get a null value. Both the Invoice and InvoiceStatus stors are populating with the correct values.
状态列渲染
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)]);
}
});
发票状态存储
Ext.define('MyApp.store.InvoiceStatus', {
extend: 'Ext.data.Store',
alias: 'store.InvoiceStatus',
requires: [
'MyApp.model.InvoiceStatus'
],
constructor: function(cfg) {
var me = this;
cfg = cfg || {};
me.callParent([Ext.apply({
autoLoad: true,
autoSync: true,
model: 'MyApp.model.InvoiceStatus',
remoteSort: true,
storeId: 'MyJsonStore1',
proxy: {
type: 'rest',
url: '/api/invoice_status',
reader: {
type: 'json',
root: 'data'
}
}
}, 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',
type: 'int'
},
{
mapping: 'client_name',
name: 'client_name',
type: 'string'
},
{
dateFormat: 'Y-m-d',
dateReadFormat: '',
mapping: 'issue_date',
name: 'issue_date',
sortType: 'asDate',
type: 'date'
},
{
dateFormat: 'Y-m-d',
mapping: 'due_date',
name: 'due_date',
sortType: 'asDate',
type: 'date'
},
{
mapping: 'payment_date',
name: 'payment_date',
sortType: 'asDate',
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'
}
});
发票状态模型
Ext.define('MyApp.model.InvoiceStatus', {
extend: 'Ext.data.Model',
fields: [
{
mapping: 'id',
name: 'id',
type: 'int'
},
{
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',
height: 100,
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,
width: 250,
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',
region: 'center',
title: 'Invoices',
titleCollapse: false,
forceFit: true,
store: 'Invoice',
columns: [
{
xtype: 'numbercolumn',
maxWidth: 120,
minWidth: 50,
dataIndex: 'id',
groupable: false,
lockable: true,
text: 'ID',
tooltip: 'Invoice ID',
format: '0'
},
{
xtype: 'numbercolumn',
hidden: true,
maxWidth: 120,
minWidth: 50,
dataIndex: 'client_id',
groupable: true,
text: 'Client ID',
format: '0'
},
{
xtype: 'gridcolumn',
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
return record.getStatus().get('name');
},
maxWidth: 200,
minWidth: 100,
dataIndex: 'invoice_status_id',
text: 'Status'
},
{
xtype: 'datecolumn',
maxWidth: 200,
minWidth: 100,
dataIndex: 'issue_date',
text: 'Issue Date',
format: 'd M Y'
},
{
xtype: 'datecolumn',
maxWidth: 200,
minWidth: 100,
dataIndex: 'due_date',
text: 'Due Date',
format: 'd M Y'
},
{
xtype: 'datecolumn',
maxWidth: 200,
minWidth: 100,
dataIndex: 'payment_date',
text: 'Payment Date',
format: 'd M Y'
},
{
xtype: 'templatecolumn',
summaryType: 'sum',
maxWidth: 150,
minWidth: 50,
tpl: [
'${amount}'
],
defaultWidth: 80,
dataIndex: 'amount',
groupable: true,
text: 'Amount'
}
],
features: [
{
ftype: 'grouping'
}
]
}
]
}
]
}
]
});
me.callParent(arguments);
}
});
推荐答案
我设法通过使用回调函数使关联查找工作，但发现自己从商店进行查找要容易得多.
I managed to get the association lookup working by using a callback function but found it much easier to simply do the lookup from the store myself.
我将代理从 InvoiceStatus 存储移到 InvoiceStatus 模型，并使 InvoiceStatus 存储自动加载.
I moved the Proxy from the InvoiceStatus store and onto the InvoiceStatus model and made the InvoiceStatus store autoload.
我更改了 Status 列的渲染方法，以便像这样从 InvoiceStatus 存储中查找显示名称.
I changed the render method of the Status column to lookup the display name from the InvoiceStatus store like so.
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
var store = Ext.data.StoreManager.lookup('InvoiceStatus');
return store.getById(value).get('name');
},
事实证明这是一个更简单的解决方案.
This proved to be a much simpeler solution.
这篇关于EXT JS 4 使用模型关联来渲染网格显示值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
