有條件地綁定組件狀態

Question

我打算根據在組合框中選擇的值更改表單（隱藏）中幾個字段的狀態。

這可以使用諸如setVisible（）或setHidden（）之類的方法來完成。

使用綁定組件狀態可以實現這個目標嗎？

解決

小提琴https://fiddle.sencha.com/#fiddle/1itf

Answer 1

是的。使用ViewModel formulas。從文檔引用：

許多配置您想要綁定的是布爾值，如可見（或隱藏），禁用，檢查和按下。綁定模板支持模板中的「inline」布爾否定。其他形式的代數被降級爲公式（見下文），但是布爾反轉是很常見的，對此有特殊的規定。

基本上，您可以使用綁定來控制可見屬性，但綁定需要是布爾值。您可以通過您的'isAdmin'檢查來查看。所以你需要做的是在ViewModel上創建一個公式並綁定到該公式上。

Ext.define('My.ViewModel', { 
    extend: 'Ext.app.ViewModel', 
    formulas: { 
    isAlabama: function(get) { 
     return get('comboboxvalue') === 'AL'; 
    } 
    } 
} 

要使用此功能，您需要說明您在面板中使用此視圖模型。另外...你看到comboboxvalue位？好吧，它看起來像ComboBoxes不會自動發佈他們的價值屬性視圖模型 - 你需要明確這樣做，如下所示：

{ xtype: 'combobox', 
    fieldLabel: 'Choose State', 
    store: states, 
    queryMode: 'local', 
    displayField: 'name', 
    valueField: 'abbr', 
    reference:'combobox', 
    bind: { 
    value: '{comboboxvalue}' 
    } 
} 

Answer 2

有可能是一個更好的解決方案，但你可以添加屬性到你的店裏來確定要隱藏或沒有，那麼綁定到該屬性：

Ext.application({ 
    name : 'Fiddle', 

    launch : function() { 

    } 
}); 

var states = Ext.create('Ext.data.Store', { 
    fields: ['abbr', 'name'], 
    data : [ 
     {"abbr":"AL", "name":"Alabama", "hide": 0}, 
     {"abbr":"AK", "name":"Alaska", "hide": 1}, 
     {"abbr":"AZ", "name":"Arizona", "hide": 1} 
    ] 
}); 

Ext.create('Ext.form.Panel', { 
    title: 'Sign Up Form', 
    width: 300, 
    height: 230, 
    bodyPadding: 10, 
    margin: 10, 

    layout: { 
     type:'anchor', 
     align: 'stretch' 
    }, 

    viewModel: true, 

    items: [{ 
     xtype: 'checkbox', 
     boxLabel: 'Is Admin', 
     reference: 'isAdmin' 
    },{ 
     xtype: 'textfield', 
     fieldLabel: 'Admin Key', 
     bind: { 
      visible: '{!isAdmin.checked}' 
     } 
    },{ 

     xtype : 'menuseparator', 
     width : '100%' 
    },{ 
     xtype: 'combobox', 
     fieldLabel: 'Choose State', 
     store: states, 
     queryMode: 'local', 
     displayField: 'name', 
     valueField: 'abbr', 
     reference:'combobox' 
    },{ 
     xtype: 'textfield', 
     fieldLabel: 'If Alabama, hide', 
     bind: { 
      visible: '{combobox.selection.hide}' 
     } 
    },{ 
     xtype: 'textfield', 
     fieldLabel: 'If Alaska, hide', 
     bind: { 
      visible: '{}' 
     } 
    },{ 
     xtype: 'textfield', 
     fieldLabel: 'If Arizona, hide', 
     bind: { 
      visible: '{}' 
     } 
    }], 
    renderTo: Ext.getBody() 
});