EXT JS 4使用模型关联来呈现网格显示值 [英] EXT JS 4 use an model association to render a grid display value
本文介绍了EXT JS 4使用模型关联来呈现网格显示值的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
详细信息
我有一个网格用于显示发票信息。使用发票存储填充网格，发票存储使用发票模型，发票模型与InvoiceStatus模型具有一个关联，主键为id，前缀为invoice_status_id。 p>
问题
我不知道如何使Invoice Grid的Status列的显示值使用invoice_status_id插入了关联模型的名称。我知道我需要创建一个渲染器，但是我仍然得到一个空值。发票和发票状态都正在填充正确的值。
状态列渲染
renderer：function（value，metaData，record，rowIndex，colIndex，store，view）{
return record.getStatus（）。get（'name'
}，
发票商店
Ext.define（'MyApp.store.Invoice'，{
extends：'Ext.data.Store'，
要求：[
'MyApp.model.InvoiceModel'
]，
构造函数：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'，{
extends：'Ext.data.Store'，
alias：'store.InvoiceStatus' ，
要求：[
'MyApp.model.InvoiceStatus'
]，
构造函数：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'，{
extends：'Ext.data.Model'，
用途：
'MyApp.model.InvoiceStatus'
]，
fields：[
{
mapping：'id'，
name：' id'，
type：'int'
}，
{
mapping：'client_id'，
name：'client_id'，
type： int'
}，
{
映射：'client_name'，
名称：'client_name'，
类型：'string'
}，
{
dateFormat：'Ym-d'，
dateReadFormat：''，
mapping：'issue_date'，
name：'issue_date'，
sortType： 'asDate'，
type：'date'
}，
{
dateFormat：'Ym-d'，
mapping：'due_date'，
name：'due_date'，
sortType：'asDate'，
type：'日期'
}，
{
映射：'payment_date'，
名称：'payment_date'，
sortType：'asDate'，
type：'日期'，
useNull：true
}，
{
名称：'amount'
}，
{
映射：'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'，{
extends：'Ext.data.Model'，
fields：[
{
映射：'id'，
名称：'id'，
类型：'int'
}，
{
映射：'name'，
name：'name'，
type：'string'
}
]
}）;
发票网格
Ext.define（'MyApp.view.ApplicationViewport'，{
extends：'Ext.container.Viewport'，
require：
'MyApp.view.ClearTriggerField'
]，
布局：{
类型：'border'
}，
initComponent：function（）{
var me = this;
Ext.applyIf（me，{
items：[
{
xtype：标题'，
区域：'北'，
高度：100，
项目：[
{
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'，
区域：'west'，
split：true，
autoRender：fals e，
maxWidth：300，
width：250，
bodyBorder：false，
animCollapse：false，
collapsed：false，
collapseapsible：
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'，
图标：'/images/settings.png'
}
]
}
]，
列：[
{
xtype：'templatecolumn'，
tpl：[
'< img class =pull-left client-menu-imagesrc =/ images / {type} .png>< div class =client-menu-name> {name}< / div>< div class =client-menu-type> {type}< / div>'
]，
dataIndex：'id'，
文本：'客户'
}
]，
selModel：Ext.create（'Ext.selection.RowModel'，{
}），
插件：[
Ext.create（'Ext.grid.plugin.BufferedRenderer'，{
}）
]
}，
{
xtype：'gridpanel'，
region：'center'，
title：'Invoices'，
titleCollapse：false，
forceFit：true，
store：'发票'，
列：[
{
xtype：'numbercolumn'，
maxWidth：120，
minWidth：50，
dataIndex：'id'，
groupable：false，
lockable：true，
文本：'ID'，
工具提示：'发票ID'，
格式：'0'
}，
{
xtype：'numbercolumn'，
hidden：true，
maxWidth：120，
minWidth：50，
dataIndex：'client_id'，
groupable：true，
text：'Client ID' ，
格式：'0'
}，
{
xtype：'gr idcolumn'，
renderer：function（value，metaData，record，rowIndex，colIndex，store，view）{
return record.getStatus（）。get（'name'）;
}，
maxWidth：200，
minWidth：100，
dataIndex：'invoice_status_id'，
文本：'状态'
}，
{
xtype：'datecolumn'，
maxWidth：200，
minWidth：100，
dataIndex：'issue_date'，
text：'发布日期'，
格式：'d M Y'
}，
{
xtype： 'datecolumn'，
maxWidth：200，
minWidth：100，
dataIndex：'due_date'，
text：'到期日'，
格式：'d M Y'
}，
{
xtype：'datecolumn'，
maxWidth：200，
minWidth：100，
dataIndex：'payment_date'，
文本：付款日期，
格式：'d M Y'
}，
{
xtype：'templatecolumn'，
summaryType：'sum'，
maxWidth：150，
minWidth：50，
tpl：[
'$ {amount}'
]，
defaultWidth：80，
dataIndex：'amount'，
groupable：true，
text：'Amount'
}
] ，
功能：[
{
ftype：'grouping'
}
]
}
]
}
]
}
]
}）;
me.callParent（arguments）;
}
}）;
解决方案
我设法通过使用回调函数，但发现自己简单地从商店进行查找更容易。
第一步
我将代理从InvoiceStatus存储移动到InvoiceStatus模型，并使InvoiceStatus存储自动加载。
第二步
我更改了Status列的render方法，从InvoiceStatus存储中查找显示名称，如下所示。
renderer：function value，metaData，record，rowIndex，colIndex，store，view）{
var store = Ext.data.StoreManager.lookup（'InvoiceStatus'）;
return store.getById（value）.get（'name'）;
}，
这被证明是一个更简单的解决方案。
Details
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'.
Problem
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.
Status Column Render
renderer: function(value, metaData, record, rowIndex, colIndex, store, view) {
return record.getStatus().get('name');
},
Invoice Store
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 Store
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)]);
}
});
Invoice Model
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'
}
});
InvoiceStatus Model
Ext.define('MyApp.model.InvoiceStatus', {
extend: 'Ext.data.Model',
fields: [
{
mapping: 'id',
name: 'id',
type: 'int'
},
{
mapping: 'name',
name: 'name',
type: 'string'
}
]
});
Invoice Grid
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.
Step One
I moved the Proxy from the InvoiceStatus store and onto the InvoiceStatus model and made the InvoiceStatus store autoload.
Step Two
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屋！
查看全文
