更新記錄的數據更改時綁定到公式的ExtJS按鈕

我在Ext JS 5.1.0.107中有一個按鈕和一個treepanel。公式確定按鈕是否被禁用，並且該公式被綁定到樹形控制面板的選擇。更新記錄的數據更改時綁定到公式的ExtJS按鈕

僅當選定節點是分支並且node.get（「ID」）具有值時才應啓用該按鈕。

下面的代碼在我選擇樹中的一個節點時工作。

我的樹&按鈕：

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

在接下來的過程中出現我的問題：

我編程一個新的樹分支節點添加到樹並選擇它。 newBranchNode.data.ID未定義，因此該按鈕正確已禁用。
當我打電話newBranchNode.set('ID', myNewValue)，它更新newBranchNode.data.ID具有價值，所以isButtonDisabled公式將返回false，這意味着該按鈕應該被啓用。但是，該按鈕保持禁用狀態。

如何獲得按鈕重新評估是否應在newBranchNode一個字段設置後立即停用？

編輯：

請https://fiddle.sencha.com/#fiddle/m8q看看，並期待在應用程序運行時，控制檯日誌。

在MyViewport.js，我做了以下內容：

1秒樹的一個AfterRender事件之後，它會創建一個新的分支節點&選擇它。（按鈕被禁用正確）
之後1秒，它設置新節點的ID。
1秒後，它測試按鈕是否仍然被禁用（不正確）。

只有選定的節點不是樹葉並具有ID才能啓用該按鈕。因此，只有「家庭作業」節點纔會啓用該按鈕。

如果您選擇不同的節點，然後單擊「新節點」，該按鈕將被正確啓用。它只是不會自動啓用。

來源

2015-05-04 Greg McGrath

是，這樣做讓我以下錯誤：'無效れ引用或現有れ的ID：null'。我已經添加了一個[sencha小提琴示例]（https://fiddle.sencha.com/#fiddle/m8q）以更好地說明問題。 –

這不起作用，因爲我正在設置並獲取名爲「ID」的屬性，而不是「id」。我在看'newNode.data.ID'。 –

嘗試設置你的公式是這樣的：

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

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

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

來源

2015-05-04 17:33:04

這不起作用，因爲它沒有測試所有必需的條件。 1.）節點是分支（不是葉節點） 2.）node.get（「ID」）的值爲 –

OK。看到我的編輯.. –

這是完美的！謝謝！這是我的理解後，閱讀您的代碼和http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.app.bind.Formula的「數據依賴性」部分，這公式將在getter（）更改時隨時調用指定爲參數的東西。如果我有getter（'selectedNode'）'，'getter（'selectedNode.ID'）'和getter（'foo'）'，那麼在更改'selectedNode.get（「ID」）'後立即'和直接在'selectedNode'或'foo'下的屬性發生任何變化，它會自動重新評估這個公式。 –

更新記錄的數據更改時綁定到公式的ExtJS按鈕

回答

相關問題