Question

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

仅当所选节点是分支并且node.get（“ID”）具有值时，才应启用该按钮。

当我在树中选择一个节点时，下面的代码可以正常工作。

我的树＆amp;按钮：

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

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

我的问题出现在以下过程中：

我以编程方式将新的树分支节点添加到树中并选择它。 newBranchNode.data.ID未定义，因此按钮正确禁用。
当我致电newBranchNode.set('ID', myNewValue)时，它会使用值更新newBranchNode.data.ID，因此isButtonDisabled公式将返回false，这意味着该按钮应启用;但是，按钮保持禁用状态。

如果在设置newBranchNode字段后立即禁用该按钮，如何重新评估该按钮？

编辑：

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

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

在树的Afterrender事件后1秒，它创建了一个新的分支节点＆amp;选择它。（按钮被正确禁用）
之后1秒，它设置新节点的ID。
之后1秒，它会测试按钮是否仍然被禁用（不正确）。

只有非叶子且具有ID的选定节点才会启用该按钮。因此，只有“作业”节点才会启用按钮。

如果您选择其他节点，然后单击“新节点”，将正确启用该按钮。它不会自动启用。

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按钮绑定到公式

1 个答案: