绑定网格和表单ExtJs 6 [英] Binding Grid and Form ExtJs 6
问题描述
我有一个网格从视图模型中填充记录（来自Java restful web服务的Ajax代理数据）。当我在打开的网格窗体中选择一条记录并显示字段时。记录可以使用表单编辑。
我有一个绑定到商店的标签字段，每当用户选择一条记录时，我应该可以填充与记录关联的数据。
data：[{
createdOn：1475678859000，
updatedOn：1475679885000，
updatedBy：null，
id：174，
userName：ffff，
firstName：gg，
lastName：ggg，
salesDepartment ：[{
id：3，
code：FC，
name：Fiat-Chrysler，
departmentHead：xxx ，
applicationCode：null}]，}
{xtype：'tagfield'，
anchor：'100％'，
reference：'salesDept'，
fieldLabel：'Sales Dept \'s'，
名称：'salesDepartment'，
allowBlank： false，
displayField：'name'，
valueField：'id'，
bind： {
value：'{record.salesDepartmentIds}'，
store：'{SalesDepartmentStore}'}，
}
标记字段实际上只能用于数组或逗号分隔列表;
看起来你正在尝试使用关联，如果有更多的支持，它会很好。
我已经有一个去，并在显示方面得到它的工作，但保存值将取决于你如何计划同步值到服务器，如果你打算使用内置代理等，那么这将是一个完全不同的挑战。我想为自己的应用程序添加一个类似的组件，我会进一步思考，甚至可能会为此创建一个用户体验。
我认为您在这里有几个问题，一个让您的关联正常运行，那么您需要使您的标记栏按预期工作。
以下是小提琴
关键部分是：
扩展标记字段：
$ b
Ext.define（'RelatedTagField' ，{
extend：'Ext.form.field.Tag'，
xtype：'rtagfield'，
config：{
relatedStore：null
}，
setValue：function（val）{
this.setRelatedStore（val）;
var value;
if（val&& val.isStore）{
value = val .collect（'id'）;
} else {
value ='';
}
this.call Parent（[value]）;
}，
getValue：function（）{
return this.relatedStore;
}，
onBindStore：function（）{
this.callParent（arguments）;
this.on（'select'，function（tagfield，selection）{
var selectedIds = [];
//添加任何新选项
Ext.each （选择，函数（rec）{
var rrec = this.relatedStore.getById（rec.id）;
if（！rrec）{
this.relatedStore.add（rec.data）
}
selectedIds.push（rec.id）;
}，this）;
//删除任何未选中的元素
this.relatedStore.each（function（ rrec）{
if（selectedIds.indexOf（rrec.id）== -1）{
this.relatedStore.remove（rrec）;
}
}，this）;
}，this）;
}，
}）
绑定值：
{
xtype：'rtagfield'，
fieldLabel：'Sales Department '，
name：'id'，
displayField：'name'，
valueField：'id'，
bind：{
store：'{salesDepartment}' ，
value：'{record.salesDepartment}'
}
}，
和为关联添加定义：
$ b
Ext.define（'MyApp。 model.User'，{
extend：'Ext.data.Model'，
别名：'model.user'，
hasMany：[{
model：'MyApp.model .SalesDepartmentModel'，
associationKey：'salesdepartment'，
角色：'salesdepartment'
}]，
要求：[
'Ext.data.field.String'
]，
字段：[{
类型：'string'，
名称：'userName'
}，{
类型：'string'，
名称：'firstName'
}，{
类型：'string'，
名称：'lastName'
}，{
名称：'salesDepartment '
'，{
名称：'角色'
}，{
类型：'字符串'，
名称：'email'
}，{
名称：'notificationFrequencyId'
}]
}）;
进一步阅读
我建议您详细阅读协会和 tagfield源代码
关于将记录保存回服务器，我建议您查看会话
I have a grid populating records from view model (Ajax proxy data from Java restful web services). When I select a record in the grid form open and the fields are displayed. The records are editable using the form. I have one tag field which is binded to a store and I should be able to populate the data associated to the record whenever the user selects a record.
"data" : [ {
"createdOn" : 1475678859000,
"updatedOn" : 1475679885000,
"updatedBy" : null,
"id" : 174,
"userName" : "ffff,
"firstName" : "gg",
"lastName" : "ggg",
"salesDepartment" : [ {
"id" : 3,
"code" : "FC",
"name" : "Fiat-Chrysler",
"departmentHead" : "xxx",
"applicationCode" : null} ],}
I need to bind the value of id from sales department object . how can I achieve this. Please help me.
{xtype: 'tagfield',
anchor: '100%',
reference: 'salesDept',
fieldLabel: 'Sales Dept\'s',
name: 'salesDepartment',
allowBlank: false,
displayField: 'name',
valueField: 'id',
bind: {
value: '{record.salesDepartmentIds}',
store: '{SalesDepartmentStore}'},
}
Tag fields are really only designed to work with arrays or comma separated lists; It looks like you are trying to use with associations, which it would be nice if there was more support for this out of the box.
I've had a go, and in terms of displaying got it working however saving values will really depend on how you plan to sync values to the server, if you are going to use in built proxies etc. then this will present a whole different challenge. I would like a similar component for my own apps, I will think on this further and may even create a UX for this.
I think you have several issues here, one is getting your associations working properly, then you need to make your tagfield work as expected.
Here is the fiddle
And the key parts are:
An extended tagfield:
Ext.define('RelatedTagField', {
extend: 'Ext.form.field.Tag',
xtype: 'rtagfield',
config: {
relatedStore: null
},
setValue: function (val) {
this.setRelatedStore(val);
var value;
if (val && val.isStore) {
value = val.collect('id');
} else {
value = '';
}
this.callParent([value]);
},
getValue: function () {
return this.relatedStore;
},
onBindStore: function () {
this.callParent(arguments);
this.on('select', function (tagfield, selection) {
var selectedIds = [];
//add any new selections
Ext.each(selection, function (rec) {
var rrec = this.relatedStore.getById(rec.id);
if (!rrec) {
this.relatedStore.add(rec.data)
}
selectedIds.push(rec.id);
}, this);
//remove any not selected anymore
this.relatedStore.each(function (rrec) {
if (selectedIds.indexOf(rrec.id) == -1) {
this.relatedStore.remove(rrec);
}
}, this);
}, this);
},
})
Binding the value:
{
xtype: 'rtagfield',
fieldLabel: 'Sales Department',
name: 'id',
displayField: 'name',
valueField: 'id',
bind: {
store: '{salesDepartment}',
value: '{record.salesDepartment}'
}
},
And adding a definition for the association:
Ext.define('MyApp.model.User', {
extend: 'Ext.data.Model',
alias: 'model.user',
hasMany: [{
model: 'MyApp.model.SalesDepartmentModel',
associationKey: 'salesDepartment',
role: 'salesDepartment'
}],
requires: [
'Ext.data.field.String'
],
fields: [{
type: 'string',
name: 'userName'
}, {
type: 'string',
name: 'firstName'
}, {
type: 'string',
name: 'lastName'
}, {
name: 'salesDepartment'
}, {
name: 'roles'
}, {
type: 'string',
name: 'email'
}, {
name: 'notificationFrequencyId'
}]
});
Further reading
I suggest you read more on associations and the tagfield source code
In terms of saving records back to the server, I would recommend looking at sessions
这篇关于绑定网格和表单ExtJs 6的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
