Extjs 5 - Tagfield или Combobox - Поля поставки и скрытия формы

Question

Я хочу динамически отображать и скрывать поля в форме в соответствии с элементами, выбранными в мультиселектном Combobox (Tagfield).

Каждый элемент, выбранный в Combobox, имеет несколько соответствующих полей скрытых форм (чтобы быть шоу).

Поля имеют свойство «Hidden: True»;

Я могу показать поля, но не могу скрыть их, когда я удаляю элементы из поля Combobox или de tagfield.

listeners:{ 

    select:function( combo, records, eOpts) {

            var combo = Ext.ComponentQuery.query('#combo')[0];

            var field = Ext.ComponentQuery.query('#A')[0];                      

            var field1 =Ext.ComponentQuery.query('#B')[0];                      

            var field2 =Ext.ComponentQuery.query('#C')[0];


            var records = combo.getValue();

              console.log(records);

            for (var i = 0, count = records.length; i < count; i++) {

                    switch(records[i]) {

                    case 'itemone':

                        if(field.isHidden()) {
                            field.show();                   
                                }
                        else { 
                             field.hide();
                                }
                    break;

                    case 'itemtwo':

                        if(field1.isHidden()) {
                            field1.show();                  
                                }
                        else { 
                             field1.hide();
                                }                                       
                    break;

                    case 'itemthree':

                        if(field2.isHidden()) {
                            field2.show();                  
                                }
                        else { 
                             field2.hide();
                                }       
                    break;  
                } 
            }
        }
}

.

Console.log (записи) предоставляет следующий результат:

Показать:

["itemone"]

["itemone", "itemtwo" ]

["itemone", "itemtwo", "itemthree"]

.

Скрыть:

["itemone", "itemtwo"]

["itemone"]

.

Можете ли вы дать мне, пожалуйста, предложены исправить код.

Примечание. Извините за следующий пост ранее в неправильном месте

Я пытался реализовать свои комплекс, но без успеха (затруднения начинающих).

Мой код:

 listeners:{ 

  select:function( combo, records, eOpts) {

    var combo = Ext.ComponentQuery.query('#combo')[0];

    var fields = Ext.ComponentQuery.query('[autoHideTag]');

    var records = combo.getValue();

      console.log(records);

    for (var i = 0, count = records.length; i < count; i++) {

            fields.setVisible(records.indexOf(fields.autoHideTag) !== -1 ); 

            switch(records[i]) {

            case 'itemone':

                if(field.isHidden()) {
                    field.show();                   
                        }
                else { 
                     field.hide();
                        }
            break;

            case 'itemtwo':

                if(field1.isHidden()) {
                    field1.show();                  
                        }
                else { 
                     field1.hide();
                        }                                       
            break;

            case 'itemthree':

                if(field2.isHidden()) {
                    field2.show();                  
                        }
                else { 
                     field2.hide();
                        }       
            break;  
        } 
    }
  }
} 

.

Firebug говорит:

typeeRror: поля .sivisible не является функцией

Можете ли вы помочь с большим количеством предложений, пожалуйста.

Merci.

Answer 1

Действительно, ваш код имеет логический недостаток. Вы делаете все поле видны, но когда вы затем удалите третий тег, что происходит? Вы циклируете на выбранных тегах в Combo, и, как вы показываете его, у вас есть ["itemone", "itemtwo"], нет «ItemTree». Таким образом, ваш последний случай, тот, который мог бы скрыть 3-й поля, отмечается выполняется. И так далее для второго и первого тега.

То, что я бы сделал вместо того, чтобы зацикливаться через каждое поле, покажи, если тег выбран и скрыть его, если это не так. Например, вы можете использовать records.indexOf('itemone') !== -1 для проверки, если тег выбран.

Другой совет, я бы использовал пользовательское свойство с отличительным именем для полей, что позволяет оба упростить компонент запрос, и бессмысленно зная тег для тестирования против выбранных.

Вот что я имею в виду ... Если вы определяете свои поля таким образом:

{
    xtype: 'textfield'
    ,autoHideTag: 'itemone' // custom marker
}

.

Вы можете получить все поля в одном запросе:

// select all components with property autoHideTag resolving to something truthy
var fields = Ext.ComponentQuery.query('[autoHideTag]');

.

Вы можете сделать запрос более конкретным, если вы хотите, и если применимо, что-то вроде «Textfield [autohidetag] или" поле [autohidetag].

И, наконец, вы узнаете тег для тестирования на это поле:

// setting a component visible or hidden when it is already the case has no side-effect
field.setVisible( records.indexOf(field.autoHideTag) !== -1 );

.

Voilà. Веселиться с Ext!