Extend Ext.data.Model (add fields dynamically)

Question

I extended an existing Model by adding fields using the prototype. Everything works fine, the data can be received from the server side and can be used on client side. But, when I now update my data and send it back to the server side, the "new" fields are not recognized by the writer of the proxy.

To be more specific: I have a model like this:

    Ext.define('Osgaar', {
      extend: 'Ext.data.Model',
      fields: [
        { name: 'first', type: 'string' },
        { name: 'second', type: 'string' },
        { name' 'third', type: 'string' }
      ],

      proxy: {
        type: 'rest',
        url: 'public/svcmethod',
        reader: {
          type: 'json',
          root: 'data'
        },
        writer: {
          type: 'json',
          writeAllFields: false
        }
      }
    });

I am extending the model like that:

    Osgaar.prototype.fields.add({ name: 'fourth', type: 'string' });

I tried to set writeAllFields to false to get all attributes transferred, there are just those from the defined model, not the one added using the prototype (Fiddler confirms that).

Does anybody now a way to solve this without defining a new model?

Thank you in advance.

Answer 1

I think the best solution here is the following:

Osgaar.prototype.fields.add(new Ext.data.Field({ name: 'fifth', type: 'string'})); // create Ext.data.Field constructor, not just simple Object

I did a quick look on the Writer implementation, and here is a method that is called by write() when you write data:

getRecordData: function(record) {
        var isPhantom = record.phantom === true,
            writeAll = this.writeAllFields || isPhantom,
            nameProperty = this.nameProperty,
            fields = record.fields,            // <- look here
            data = {},
            changes,
            name,
            field,
            key;

        if (writeAll) {
            fields.each(function(field){
                if (field.persist) {           // <- checks the persist property!
                    name = field[nameProperty] || field.name;
                    data[name] = record.get(field.name);
                }
            });

Then I checked the value of persist property of a field that's added to the prototype after the model is defined and turned out it's undefined. This is because you are not truly creating an Ext.data.Field instance that would inherit all Field defaults and other useful stuff, you're simply adding a plain Object to the fields collection. Osgaar.prototype.fields is just a MixedCollection and since you're working with it directly, there's no place where Ext.data.Field constructor might be called implicitly.

If it's common for your application logic to add Model fields on the fly, consider implementing an addField() method to your custom Models (create another base class in the inheritance chain).

Hope this helps, good luck! I've been using ExtJS for quite a while so this was like a quiz to me :)

Answer 2

I found another solution for my original issue.

Instead of adding the fields to the prototype of the model I did the following:

Osgaar_Temp = Osgaar;
delete Osgaar;

Ext.define('Osgaar', {
    extend: 'Osgaar_Temp',
    fields: 
    [
        { name: 'typeCategories', type: 'string' }
    ]
});

This seems to be the best solution.