ViewModel links record with an array property binded to tagfield triggers dirtyness

Question

Using ExtJS 7.3.1.27

I have a Form View which its fields are bound to a record loaded using the ViewModel links functionality.

When I open the form, the record is automatically loaded and all fields populated.

One of the fields is a tagfield which is also bound to the linked record. Specifically it's bound to a property that holds an array of tags, in this case, the property name is selected_tags .

The tagfield value is bound as usual:

bind : {
   store: '{tags}',
   value: '{linked_rec.selected_tags}'
},

THe tags are loaded correctly into the tagfield, but the record becomes dirty. This problem only happens with this field.

Is it a ExtJS bug?

Answer 1

If you do a data-binding, it happens in the following order:

• create View
• reset all Fields ==> not dirty
• ...20 Min later... //asynchronous
• resolve data-binding for tags ==> dirty

If you want to do it with databinding you have to clear the dirty state for all fields after the data-binding resolves. Personally I am overwrote my fields, so that data-binding works without making the fields dirty.

You might want to go this way =>

Ext.define('Fiddle.view.MainModel', {
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.main',
    
    links: {
        formData: {
            type: 'Fiddle.model.Form',
            id: 1
        }
    },
    
    formulas: {
        formDataUpdate: {
            bind: '{formData}',
            get: function(formData) {
                this.getView().loadRecord(formData);
            }
        }
    }
});

I am listening for the links to be resolved and call loadRecord to fill the view. This will do the clear dirty job for you.

!! No data binding in the view !!