记录的数据更改时更新绑定到公式的 ExtJS 按钮

Question

我在 Ext JS 5.1.0.107 中有一个按钮和一个树面板。公式确定按钮是否被禁用，并且该公式绑定到树面板的 selection。

仅当 selected 节点是一个分支并且 node.get("ID") 有一个值时才应启用该按钮。

当我 select 树中的一个节点时，下面的代码有效。

我的树和按钮：

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

我的视图模型：

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}'
        }
    }
});

我的问题发生在以下过程中：

我以编程方式向树中添加一个新的树分支节点并且 select 它。 newBranchNode.data.ID 未定义，因此按钮正确已禁用。
当我调用 newBranchNode.set('ID', myNewValue) 时，它会用一个值更新 newBranchNode.data.ID，因此 isButtonDisabled 公式会 return false，这意味着应该启用该按钮；但是，该按钮保持禁用状态。

如果在设置 newBranchNode 上的字段后应立即禁用该按钮，我如何才能重新评估该按钮？

编辑：

请查看 https://fiddle.sencha.com/#fiddle/m8q 并查看应用程序运行时的控制台日志。

在 MyViewport.js 中，我执行以下操作：

树的 afterrender 事件后 1 秒，它创建了一个新分支节点 & selects 它。（按钮被正确禁用）
1 秒后，它设置新节点的 ID。
1 秒后，它测试按钮是否仍然禁用（不正确）。

只有非叶子且具有 ID 的 selected 节点才能启用该按钮。因此，只有 "homework" 节点会启用该按钮。

如果你select一个不同的节点，然后点击"New Node"，该按钮将被正确启用。它只是不会自动启用。

Answer 1

尝试像这样设置公式：

canNotAddNode: {
    get: function(getter) {
        var selectedNode = getter('selectedNode'),
            id = getter('selectedNode.ID');

        return !id || selectedNode.isLeaf();
    }
}

工作示例：https://fiddle.sencha.com/#fiddle/m96

记录的数据更改时更新绑定到公式的 ExtJS 按钮

Updating ExtJS Button Bound to Formula when Record's Data Changes

javascript

extjs

extjs5