绑定网格和表单 ExtJs 6
Binding Grid and Form ExtJs 6
我有一个从视图模型填充记录的网格(Ajax 来自 Java restful Web 服务的代理数据)。当我 select 网格表单中的一条记录打开并显示字段时。可以使用表单编辑记录。
我有一个绑定到商店的标签字段,只要用户 select 有一条记录,我就应该能够填充与该记录关联的数据。
"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} ],}
我需要绑定销售部门对象的id值。我怎样才能做到这一点。请帮助我。
{xtype: 'tagfield',
anchor: '100%',
reference: 'salesDept',
fieldLabel: 'Sales Dept\'s',
name: 'salesDepartment',
allowBlank: false,
displayField: 'name',
valueField: 'id',
bind: {
value: '{record.salesDepartmentIds}',
store: '{SalesDepartmentStore}'},
}
标签字段实际上只设计用于数组或逗号分隔列表;
看起来您正在尝试与关联一起使用,如果有更多开箱即用的支持,那就太好了。
我试过了,就显示而言,它可以正常工作,但是保存值实际上取决于您计划如何将值同步到服务器,如果您打算在内置代理等中使用,那么这个将提出一个完全不同的挑战。我想要一个类似的组件用于我自己的应用程序,我会进一步考虑这个问题,甚至可能为此创建一个用户体验。
我认为你在这里有几个问题,一个是让你的关联正常工作,然后你需要让你的标签域按预期工作。
这是fiddle
关键部分是:
扩展标签域:
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);
},
})
绑定值:
{
xtype: 'rtagfield',
fieldLabel: 'Sales Department',
name: 'id',
displayField: 'name',
valueField: 'id',
bind: {
store: '{salesDepartment}',
value: '{record.salesDepartment}'
}
},
并为关联添加定义:
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'
}]
});
进一步阅读
我建议您在 associations and the tagfield source code
上阅读更多内容
关于将记录保存回服务器,我建议查看 sessions
我有一个从视图模型填充记录的网格(Ajax 来自 Java restful Web 服务的代理数据)。当我 select 网格表单中的一条记录打开并显示字段时。可以使用表单编辑记录。 我有一个绑定到商店的标签字段,只要用户 select 有一条记录,我就应该能够填充与该记录关联的数据。
"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} ],}
我需要绑定销售部门对象的id值。我怎样才能做到这一点。请帮助我。
{xtype: 'tagfield',
anchor: '100%',
reference: 'salesDept',
fieldLabel: 'Sales Dept\'s',
name: 'salesDepartment',
allowBlank: false,
displayField: 'name',
valueField: 'id',
bind: {
value: '{record.salesDepartmentIds}',
store: '{SalesDepartmentStore}'},
}
标签字段实际上只设计用于数组或逗号分隔列表; 看起来您正在尝试与关联一起使用,如果有更多开箱即用的支持,那就太好了。
我试过了,就显示而言,它可以正常工作,但是保存值实际上取决于您计划如何将值同步到服务器,如果您打算在内置代理等中使用,那么这个将提出一个完全不同的挑战。我想要一个类似的组件用于我自己的应用程序,我会进一步考虑这个问题,甚至可能为此创建一个用户体验。
我认为你在这里有几个问题,一个是让你的关联正常工作,然后你需要让你的标签域按预期工作。
这是fiddle
关键部分是:
扩展标签域:
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);
},
})
绑定值:
{
xtype: 'rtagfield',
fieldLabel: 'Sales Department',
name: 'id',
displayField: 'name',
valueField: 'id',
bind: {
store: '{salesDepartment}',
value: '{record.salesDepartment}'
}
},
并为关联添加定义:
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'
}]
});
进一步阅读
我建议您在 associations and the tagfield source code
上阅读更多内容关于将记录保存回服务器,我建议查看 sessions