extjs 5 - tagfieldまたはcombobox - フォームフィールドの表示と非表示

Question

マルチ選択コンボボックス（TagField）で選択した項目に従って、フィールドを動的に表示して非表示にしたいです。

コンボボックスで選択された各項目には、（表示する）

がいくつかの関連隠しフォームフィールドがあります。

フィールドには "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：fields.setVisibleは関数ではありません

あなたはより多くの提案を手伝ってください、してください。

Merci。

Answer 1

確かに、あなたのコードは論理的な欠陥を持っています。あなたはすべてのフィールドを見えるようにしますが、あなたがそれから3番目のタグを削除するとき、何が起こるのですか？あなたはコンボの現在選択されているタグをループし、それを表示するように、そこに["itemone", "itemtwo"]、 "itemthree"を持っています。したがって、最後のケースは、3RDフィールドを非表示にすることができるものが実行されます。そして、2番目と最初のタグのために。

代わりに各フィールドをループするのは、タグが選択されている場合はそれを表示し、それを非表示にしていない場合は表示します。たとえば、Tagが選択されているかどうかをテストするには、records.indexOf('itemone') !== -1を使用できます。

もう1つのヒントでは、フィールドの独特の名前を持つカスタムプロパティを使用し、両方ともコンポーネントクエリを簡素化し、選択したものに対してテストするタグを考え出すことができます。

これは私が意味することです...あなたがこのようにあなたのフィールドを定義した場合：

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

.

すべてのフィールドを1つのクエリに入れることができます。

// 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！

を楽しんでください