ExtJs和嵌套模型 [英] ExtJs and nested models
问题描述
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 '，键入：'int'}
]
}）;
如您所见，车型有brandId，brandName等字段b $ b例如，我想编辑这个模型的一个实例。
我创建一个编辑表单，它与combobox链接到'brandId'字段。
然后我使用这个
values = form.getValues（）保存表单值到模型实例;
record.set（values）;
一切正常，但所有表示外部模型的字段都有问题：
只有id被更新，而依赖于id的所有其他字段保持不变。
在常规的OOP语言（例如Java）中，我将创建一个类CarBrand
，并将这个类的一个实例放在Vehicle类中。
在ExtJs 4中，它们有很多关系，但没有hasOne。
ExtJS 4中最适合这种嵌套模型的最佳方法是什么？ >
4.0。*不支持hasOne关系。 4.1是为了支持它。
for 4.0.7我有以下重写。
Ext.define（'HOD.overrides.Form'，{}，function（）{
/ *
*为$表单实现嵌套的setValues
*数组
* /
Ext.override（Ext.form.Basic，{
setValues：function（values，arrayField）{
var me = this ;
函数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））{
//对象数组
Ext.each（values，function（val）{
setVal（val.id，val.value）;
}）;
} else {
//对象哈希
Ext.iterate（values，setVal）;
}
返回此;
}，
/ **
*将此表单中的值保留在beginEdit / endEdit块中传递的{@link Ext.data.Model}对象中。
* @param {Ext.data.Model}记录编辑
* @return {Ext.form.Basic}的记录此
* /
updateRecord：function（record） {
var values = this.getFieldValues（），
name，
obj = {};
函数populateObj（记录，值）{
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（）;
返回此;
}
}）;
这可以让我做的是我的形式，我用这样的名字创建它们。
//联系方式
{
xtype：'fieldcontainer'，
defaultType：'textfield'，
layout：'anchor'，
fieldDefaults：{
anchor：'80％'，
allowBlank：true
}，
items：[
{
xtype：'textfield'，
name：'homePhone'，
fieldLabel：'家庭电话号码'
}，
{
xtype：'textfield'，
name：'mobilePhone'，
fieldLabel：'手机号'
}]
}，
{
xtype：'fieldcontainer'，
defaultType：'textfield'，
layout：'anchor'，
fieldDefaults：{
anchor：'80％'，
allowBlank： true
}，
items：[
{
name：'address.id'，
xtype：'hidd en'
}，
{
name：'address.building'，
fieldLabel：'建立'
}，
{
名称：'address.street'，
fieldLabel：'Street'
}，
{
name：'address.city'，
fieldLabel：'City'
$，
{
名称：'address.county'，
fieldLabel：'县'
}，
{
名称：'地址。 postcode'，
fieldLabel：'Postcode'
}，
{
name：'address.country'，
fieldLabel：'Country'
}
]
}，
]
注意。在名称字段中，允许覆盖的setValues和updateRecord表单知道它需要将这些值映射到模型中定义的新模型。
Ext.define（'HOD.model.Employee'，{
extends：'Ext.data.Model'，
fields：[
// Person Class
// Auto
'id'，
'name'，
'homePhone'，
'mobilePhone'，
{model：'HOD.model。地址'，name：'address'}，// Address
{model：'HOD.model.Contact'，name：'iceInformation'} // Person
]
}）;
Ext.define（'HOD.model.Address'，{
extends：'Ext.data.Model'，
fields：[
'building'
'street'，
'city'，
'county'，
'postcode'，
'country'
]，
belongsTo ：'Employee'
}）;
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'}
]
});
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);
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.
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.
What is the best approach in ExtJS 4 for such nested models?
4.0.* doesn't support the hasOne relationship. 4.1 is meant to support it.
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'
}
]
},
]
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屋！
