ExtJS button update for formula when post data changes

I have a button and tree panel in Ext JS 5.1.0.107. The formula determines if the button is disabled, and this formula is tied to the selection of the tree panel.

The button should only be enabled if the selected node is a branch and node.get ("ID") has a value.

The code below works when I select a node in the tree.

My tree and button:

{
    xtype: 'treepanel',
    bind: {
        selection: '{selectedNode}'
    },
    ...
}, {    
    xtype: 'button',
    bind: {
        disabled: '{isButtonDisabled}'
    },
    ...
}

      

        
        
        
      

    

My ViewModel:

Ext.define('App.view.MyViewModel', {    
    extend: 'Ext.app.ViewModel',
    alias: 'viewmodel.myviewmodel',
    requires: ['Ext.app.bind.Formula'],
    data: {selectedNode: false},

    formulas: {
        // returns `true` if node is a leaf or node.data.ID has no value
        isButtonDisabled: {
            get: function(data) {
                var isDisabled = true;
                data = data || {};

                if (data.isModel) {
                    isDisabled = Ext.isEmpty(data.get('ID')) || data.isLeaf();
                }

                return isDisabled;
            },
            bind: '{selectedNode}'
        }
    }
});

      

        
        
        
      

    

My problem occurs during the following process:

• I programmatically add the tree branch node to the tree and select This. newBranchNode.data.ID
  
  - undefined, so the button is properly disabled.

• When I call newBranchNode.set('ID', myNewValue)
  
  it updates newBranchNode.data.ID
  
  with a value, so the formula isButtonDisabled
  
  returns false
  
  which means the button should be enabled; however, the button remains disabled.

How do I get a button to re-evaluate if it should be disabled immediately after setting the field to newBranchNode

?

EDIT:

Please take a look at https://fiddle.sencha.com/#fiddle/m8q and look at the console log when the app starts.

In MyViewport.js I do the following:

• 1 second after the tree's afterrender event, a new branch node is created and fetched. (button disabled correctly)
• After 1 second, a new node ID is set.
• After 1 second, it is checked whether the button is disabled (incorrect).

Only the selected node, which is not a leaf and has an ID, will activate the button. Therefore, only the "homework" node will include the button.

If you select a different node, then click Create Node, the button will be enabled correctly. It just won't turn itself on automatically.