ExtJS 6.2 A problem with Binding a view model while updating

Question

I have a problem in ExtJS 6.2 while binding a view model. I want to update my model automatically while submitting form. This is my view model:

 Ext.define('..model.OperationProperty', {    
    idProperty: 'ObjectID',    
    binding: {
        deep: true
    },    
    fields: [
        {
            name: 'ID',
            type: 'integer'
        },
        {
            name: 'Operation',
            type: 'auto'
        },
        {
            name: 'OperationForInvoice',
            type: 'auto'
        }
    ]
});

Operation and OperationForInvoice are different models.

I load data successfully like;

viewmodel.setData({
        operationproperty: operationproperty
          });

 operationproperty.load();

and this is my checkbox inside a container.

{
xtype: 'container',
layout: {
    type: 'vbox',
    pack: 'center',
    align: 'middle'
},
items: {
   xtype: 'checkbox',
   bind: {
        data: {
           value: '{operationproperty.Operation.IsExplanationNecessary}',
           deep: true
        }
   }
         //bind: "{operationproperty.Operation.IsExplanationNecessary}",
         //deep: true,
         //bind: {
         //    value: "{showIsExplanationNecessary}"
         //}
         //bind: {
         //    Operation: {
         //        bindTo: '{operationproperty.Operation.IsExplanationNecessary}',
         //        deep: true
         //    }
         //}
}

and viewmodel looks good after loading data. Operation and OperationForInvoice models loaded and my checkbox looks checked. But when I make something in my form, for example uncheck the checkbox, the change does not appear on view model but an Operation object appears bottom of the view model includes only changed item. I added the screen shot

I also search for "deep: true" but it does not work or I can't find the correct way to use it. And I tried to use formula in view model I show the same result it gives same result.

formulas: {

    showIsExplanationNecessary: {
        bind: {
            bindTo: '{operationproperty.Operation.IsExplanationNecessary}',
            deep: true
        },

        get: function (get) {
            return get;
        },

        set: function (value, type) {
            debugger;
            this.set('operationproperty.Operation.IsExplanationNecessary', value);  //not set the field and add Operation object again
        }
    }

}

I hope somebody help thanks.

Answer 1

I fixed the issue by changing formula's set part. New formula will be like;

showIsExplanationNecessary: {

        get: function (get) {
            var operation = get('operationproperty.Operation');

            if (operation == null || operation.IsExplanationNecessary == null)
                return false;

            if (operation.IsExplanationNecessary != null) {
                return operation.IsExplanationNecessary;
            }

            return false;
        },

        set: function (value, type) {
            this.getData().operationproperty.getData().Operation.IsExplanationNecessary = value;
        }
    }

If another solution exists for the issue please notify me. Thank you for your time.