Состояние компонента связывания условно

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