javascript-在ext网格中显示值,其中值对应于另一个表/模型中的字符串
作者:互联网
我正在通过构建一个非常简单的“ scrum”开发跟踪应用程序自学ExtJS.我目前正在将“积压”显示为一个网格面板,以显示卡(用户素材)的属性.
Card.js(卡模型)
Ext.define('AM.model.Card', {
extend: 'Ext.data.Model',
fields: [
'id',
'name',
'priority_id',
...
]
});
Priority.js(优先级模型)
Ext.define('AM.model.Priority', {
extend: 'Ext.data.Model',
fields: [
'id',
'name',
'short_name'
]
});
因此,卡的数据将如下所示:
backlogcards.json(数据)
{
success: true,
backlogcards: [
{
id: 1,
name: 'ONEs',
priority_id: 2,
...
},
{
id: 2,
name: 'TWOs',
priority_id: 3,
...
}
]
}
优先级如下所示:
priority.json(数据)
{
success: true,
priorities: [
{
id : 1,
name : "High",
short_name : "H"
},
{
id : 2,
name : "Medium",
short_name : "M"
},
{
id : 3,
name : "Low",
short_name : "L"
}
]
}
因此,理想情况下,我想做的是让网格面板显示相应的priority_id的short_name.单击该项目以进行内联编辑时,将显示一个组合框,其中显示了name属性.我已经到一半了.
BacklogList.js(查看)
Ext.define('AM.view.card.BacklogList', {
extend: 'Ext.grid.Panel',
alias: 'widget.backlogcardlist',
title: 'Backlog',
store: 'BacklogCards',
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
columns: [
{ header: 'ID', dataIndex: 'id' },
{ header: 'Name', dataIndex: 'name', field: 'textfield' },
{
header: 'Priority',
dataIndex: 'priority_id',
width: 130,
field: {
xtype: 'combobox',
typeAhead: true,
store: 'Priorities',
displayField: 'name',
valueField: 'id',
listClass: 'x-combo-list-small'
}
}
]
});
所以我知道’dataIndex’属性是我需要修改以更改显示的内容,但是我不确定如何将这两个存储绑定在一起.
如上所示,优先级显示为数字而不是short_name.
这是我需要使用关联的情况吗? (我只知道他们)Sencha Docs
谢谢!
EDIT1:哦,我意识到我可以对执行此更改的渲染器属性进行“硬编码”,但是我想避免这种情况,而是使用优先级存储中的值.
renderer: function(value){
if (value==3)
{
return "L";
}
else if (value==2)
{
return "M";
}
else
{
return "H";
}
},
埃文(Evan)的EDIT2:
优先商店
Ext.define('AM.store.Priorities', {
extend: 'Ext.data.Store',
model: 'AM.model.Priority',
autoLoad: true,
proxy: {
type: 'ajax',
api: {
read: 'app/data/priorities.json',
update: 'app/data/updateUsers.json'
},
reader: {
type: 'json',
root: 'priorities',
successProperty: 'success'
}
}
});
store.each都指这个商店,对不对?如果是这样,我该如何执行每个操作?
我尝试将声明行更改为:
var test = Ext.define('AM.store.Priorities', {
然后尝试将代码更改为test.each,但未成功.
再次感谢!
解决方法:
您需要使用渲染器,但是并没有阻止您循环遍历优先级存储和检查中的值的操作,例如:
renderer: function(value) {
var display = '';
store.each(function(rec){
if (rec.get('id') === value) {
display = rec.get('name');
return false;
}
});
return display;
}
标签:extjs,extjs4,javascript 来源: https://codeday.me/bug/20191102/1991583.html