EXTJS 5 - 태그 필드 또는 콤보 상자 - 양식 필드 표시 및 숨기기

Question

다중 선택 콤보 상자(태그 필드)에서 선택한 항목에 따라 양식의 필드를 동적으로 표시하고 숨기고 싶습니다.

콤보 상자에서 선택한 각 항목에는 여러 개의 연관된 숨겨진 양식 필드(표시됨)가 있습니다.

필드에는 "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;  
        } 
    }
  }
} 

방화범은 이렇게 말합니다.

유형오류:fields.setVisible은 함수가 아닙니다.

더 많은 제안을 도와주실 수 있나요?

머시.

Answer 1

실제로 귀하의 코드에는 논리적 결함이 있습니다.모든 필드를 표시한 후 세 번째 태그를 제거하면 어떻게 되나요?콤보에서 현재 선택한 태그를 반복하고 표시하면 다음과 같은 결과가 나타납니다. ["itemone", "itemtwo"], 거기에는 "item three"가 없습니다.따라서 마지막 경우인 세 번째 필드를 숨길 수 있는 경우는 메모가 실행됩니다.두 번째와 첫 번째 태그에도 마찬가지입니다.

대신 내가 할 일은 각 필드를 반복하면서 태그가 선택되면 표시하고 그렇지 않으면 숨기는 것입니다.당신이 사용할 수있는 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]" 또는 "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와 함께 즐거운 시간 보내세요!