1

複数選択コンボボックス (タグフィールド) で選択されたアイテムに応じて、フォーム内のフィールドを動的に表示および非表示にしたい。

コンボボックスで選択された各項目には、いくつかの関連する非表示のフォーム フィールド (表示される) があります。

フィールドには「hidden:true」というプロパティがあります。

フィールドを表示することはできますが、コンボボックス フィールドまたはタグ フィールドからアイテムを削除すると非表示にできません。

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(records) は次の結果を提供します。

見せる：

["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 は関数ではありません

もっと提案を手伝ってくれませんか。

メルシー。

4

1 に答える 1

1

確かに、あなたのコードには論理的な欠陥があります。すべてのフィールドを表示できるようにしましたが、3 番目のタグを削除するとどうなりますか? コンボで現在選択されているタグをループします。表示されているように、["itemone", "itemtwo"]そこには「itemthree」がありません。したがって、最後のケース、3番目のフィールドを非表示にする可能性のあるケースは実行されません。2 番目と 1 番目のタグについても同様です。

代わりに、各フィールドをループして、タグが選択されている場合は表示し、選択されていない場合は非表示にします。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]" または "field[autoHideTag]" のように、クエリをより具体的にすることができます。

最後に、このフィールドをテストするタグがわかります。

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

ほら。Extを楽しんでください！

于 2014-07-30T20:18:10.880 に答える