Extjs4 How to change a Model dynamically?

Question

I use Extjs4 and MVC. I would like to change my Model's fields dynamically... Something like adding a variable number of fields... Any suggests?

Answer 1

You can use the model.setFields(fieldsArray) function, shown here in the API. This method replaces all existing fields on the model with whatever new fields you include in the argument. There is not a static getFields method to capture the existing fields so as not to overwrite them but it is easy enough to get them using model.prototype.fields.

I did this recently to attach dynamic permission setting fields to a "User" model before I loaded the user. Here's an example:

Ext.define('myApp.controller.Main', {
    extend: 'Ext.app.Controller',

    models: [
        'User',
    ],

    stores: [
        'CurrentUser', // <-- this is not autoLoad: true
        'PermissionRef', // <-- this is autoLoad: true
    ],

    views: ['MainPanel'],

    init: function() {
        var me = this;

        // when the PermissionRef store loads 
        // use the data to update the user model
        me.getPermissionRefStore().on('load', function(store, records) {
            var userModel = me.getUserModel(),
                fields = userModel.prototype.fields.getRange();
                // ^^^ this prototype function gets the original fields 
                // defined in myApp.model.User

            // add the new permission fields to the fields array
            Ext.each(records, function(permission) {
                fields.push({
                    name: permission.get('name'), 
                    type: 'bool'
                });
            });

            // update the user model with ALL the fields
            userModel.setFields(fields);

            // NOW load the current user with the permission data
            // (defined in a Java session attribute for me)
            me.getCurrentUserStore().load();

        });

    }
});