ExtJs和嵌套模型

Question

假设我有一个名为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"等字段.例如,我想编辑此模型的实例.我创建了一个编辑表单,其中的combobox链接到'brandId'字段.然后我将表单值保存到模型实例中

values = form.getValues();
record.set(values);

一切正常,但是代表一些外部模型的所有字段都存在问题:只更新了id,而依赖于id的所有其他字段保持不变.

在常规OOP语言(例如Java)中,我将创建一个类CarBrand并将此类的实例放在Vehicle类中.在ExtJs 4中,他们有很多关系,但没有hasOne.

ExtJS 4中针对此类嵌套模型的最佳方法是什么？

Answer 1

4.0.*不支持hasOne关系.4.1是为了支持它.

对于4.0.7我有以下覆盖.

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;
    }
});

这让我做的是在我的表格中我用这样的名字创建它们.

// 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'
    }
    ]
},
]

请注意.在名称字段中,允许重写的setValues和updateRecord表单知道它需要将这些值映射到新模型,新模型在模型中定义如此.

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'
});