ExtJs 和嵌套模型 [英] ExtJs and nested models
问题描述
假设我有一个名为 Vehicle 的模型
Let's say I have a model called Vehicle
Ext.define('AM.model.Vehicle', {
extend: 'Ext.data.Model',
fields: [
{name: 'brandId', type: 'int'},
{name: 'brandName', type: 'string'},
{name: 'modelId', type: 'int'},
{name: 'modelName', type: 'string'},
{name: 'yearOfRelease', type: 'int'}
]
});
如您所见，车辆型号具有brandId"、brandName"等字段.例如，我想编辑这个模型的一个实例.我创建了一个编辑表单，其中的组合框链接到brandId"字段.然后我用这个将表单值保存到模型实例
As you can see, the vehicle model has fields "brandId", "brandName", etc. For example, I want to edit an instance of this model. I create an edit form, which has combobox linked to 'brandId' field. Then I save the form values to a model instance with this
values = form.getValues();
record.set(values);
一切正常，但是所有代表一些外部模型的字段都有问题:仅更新 id，而所有其他依赖于 id 的字段保持不变.
It all works fine, but there is a problem with all the fields that represent some outer models: only id's are updated, while all other fields, that depend on id remain the same.
在常规的 OOP 语言(例如 Java)中，我会创建一个类 CarBrand并将此类的一个实例放入 Vehicle 类中.在 ExtJs 4 中，它们有 hasMany 关系，但没有 hasOne.
In a regular OOP language(Java for example), I would create a class CarBrand and put an instance of this class inside the Vehicle class. In ExtJs 4 they have hasMany relationship, but don't have hasOne.
对于此类嵌套模型，ExtJS 4 中的最佳方法是什么?
What is the best approach in ExtJS 4 for such nested models?
推荐答案
4.0.* 不支持 hasOne 关系.4.1 是为了支持它.
4.0.* doesn't support the hasOne relationship. 4.1 is meant to support it.
对于 4.0.7，我有以下覆盖.
for 4.0.7 I have the following override in place.
Ext.define('HOD.overrides.Form', {}, function() {
/*
* Implementing a nested setValues for forms with
* arrays in them.
*/
Ext.override(Ext.form.Basic, {
setValues: function(values, arrayField) {
var me = this;
function setVal(fieldId, val) {
if (arrayField) {
fieldId = arrayField + '.' + fieldId;
}
var field = me.findField(fieldId);
if (field) {
field.setValue(val);
if (me.trackResetOnLoad) {
field.resetOriginalValue();
}
} else if(Ext.isObject(val)) {
me.setValues(val, fieldId);
}
}
if (Ext.isArray(values)) {
// array of objects
Ext.each(values, function(val) {
setVal(val.id, val.value);
});
} else {
// object hash
Ext.iterate(values, setVal);
}
return this;
},
/**
* Persists the values in this form into the passed {@link Ext.data.Model} object in a beginEdit/endEdit block.
* @param {Ext.data.Model} record The record to edit
* @return {Ext.form.Basic} this
*/
updateRecord: function(record) {
var values = this.getFieldValues(),
name,
obj = {};
function populateObj(record, values) {
var obj = {},
name;
record.fields.each(function(field) {
name = field.name;
if (field.model) {
var nestedValues = {};
var hasValues = false;
for(var v in values) {
if (v.indexOf('.') > 0) {
var parent = v.substr(0, v.indexOf('.'));
if (parent == field.name) {
var key = v.substr(v.indexOf('.') + 1);
nestedValues[key] = values[v];
hasValues = true;
}
}
}
if (hasValues) {
obj[name] = populateObj(Ext.create(field.model), nestedValues);
}
} else if (name in values) {
obj[name] = values[name];
}
});
return obj;
}
obj = populateObj(record, values);
record.beginEdit();
record.set(obj);
record.endEdit();
return this;
}
});
这让我可以做的是在我的表单中用这样的名字创建它们.
Whats this lets me do is in my forms I create them with names like so.
// Contact details
{
xtype: 'fieldcontainer',
defaultType: 'textfield',
layout: 'anchor',
fieldDefaults: {
anchor: '80%',
allowBlank: true
},
items: [
{
xtype: 'textfield',
name: 'homePhone',
fieldLabel: 'Home phone number'
},
{
xtype: 'textfield',
name: 'mobilePhone',
fieldLabel: 'Mobile phone number'
}]
},
{
xtype: 'fieldcontainer',
defaultType: 'textfield',
layout: 'anchor',
fieldDefaults: {
anchor: '80%',
allowBlank: true
},
items: [
{
name: 'address.id',
xtype: 'hidden'
},
{
name: 'address.building',
fieldLabel: 'Building'
},
{
name: 'address.street',
fieldLabel: 'Street'
},
{
name: 'address.city',
fieldLabel: 'City'
},
{
name: 'address.county',
fieldLabel: 'County'
},
{
name: 'address.postcode',
fieldLabel: 'Postcode'
},
{
name: 'address.country',
fieldLabel: 'Country'
}
]
},
]
注意 .在 name 字段中，它让重写的 setValues 和 updateRecord 表单知道它需要将这些值映射到新模型，新模型在模型中定义如下.
Notice the . in the name field which lets the overridden setValues and updateRecord form know it needs to map these values to the new model, which is defined in the model like so.
Ext.define('HOD.model.Employee', {
extend: 'Ext.data.Model',
fields: [
// Person Class
// Auto
'id',
'name',
'homePhone',
'mobilePhone',
{model: 'HOD.model.Address', name: 'address'}, //Address
{model: 'HOD.model.Contact', name: 'iceInformation'} //Person
]
});
Ext.define('HOD.model.Address', {
extend: 'Ext.data.Model',
fields: [
'building',
'street',
'city',
'county',
'postcode',
'country'
],
belongsTo: 'Employee'
});
这篇关于ExtJs 和嵌套模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
