중첩 된 특성으로 Ext.ComponentQuery.query를 사용하는 방법

Question

Sencha Touch에서 중첩 된 특성으로 Ext.ComponentQuery.query를 사용하는 방법?

예컨대

var myHardtoGetObj = topLevelView.down('someview[config.categoryCfg.id=1]')[0]; 

이 나 "Catch되지 않는 오류"주어진

가져옵니다이 가능

Ext.define('SomeView', { 
    xtype : 'someview', 
    config : { 
     categoryCfg : { 
      id : 5, 
      name : 'someName' 
     } 
    } 
}); 

를?

감사합니다.

Answer 1

Ext.ComponentQuery.pseudos.hasCategoryId = function(components, selector) { 
    var result = [], 
     c, i, len; 

    for (i = 0, len = components.length; i < len; i++) { 
     c = components[i]; 

     if (c.config.categoryCfg && c.config.categoryCfg.id == selector) { 
      result.push(c); 
     } 
    } 

    return result; 
} 

는 그런 다음, query 같은 방법으로 로컬 down을 Ext.ComponentQuery.query와 함께 전 세계적으로이 의사 클래스를 모두 사용할 수 있습니다, 등 :

: 그런 일을의 표준 방법은 사용자 정의 의사 클래스 정규 표현을 추가

var allMatched, someComponent; 

allMatched = Ext.ComponentQuery.query(':hasCategoryId(1)'); 
someComponent = myPanel.down(':hasCategoryId(42)'); 

ComponentQuery doc에서 고양이를 더 피부색으로 보아라.

Answer 2

질문에 정확히 대답하지는 않지만 작동 시키려면 약간의 노력을 기울일 수 있습니다.

당신은 이제 예를 들어 일반 구성 요소 쿼리 속성

Ext.ComponentQuery.query('[nestedId=555]') 

에 액세스 할 수 그렇게함으로써

Ext.define('myCoolClass', { 
    config : { 
     nestedConfig : { 
      nestedId : 5 
     }, 

     nestedId : null 
    }, 

    updateNestedConfig: function (nestedConfig) { 
     if (nestedConfig.nestedId) { 
      this.setNestedId(nestedConfig.nestedId); 
     } 
    } 
}); 

처럼 nestedConfig에 업데이트 방법을 추가 할 수 있습니다. Sencha 소스 코드를 살펴보면 NavigationView 및 TabPanels에서 꽤 많이 사용합니다.

Answer 3

이것은 정말 흥미로운 질문입니다. 절대적으로 간단한 해결책 인 것처럼 보이지 않지만 다소 빠른 해결 방법이 있습니다.

Ext.ComponentQuery.query('someview{hasCategoryId(1)}'); 

또는

topLevelView.down('someview{hasCategoryId(1)}'); 

주 : 선택기의 구문이 같은 쿼리를 만들 수 있습니다 그리고

Ext.define('SomeView', { 
    xtype : 'someview', 
    config : { 
     categoryCfg : { 
      id : 5, 
      name : 'someName' 
     } 
    }, 

    hasCategoryId: function (id) { 
     return this.getCategoryCfg().id == id; 
    } 
}); 

:에 당신은 당신의보기 코드를 수정할 수 있습니다 xtype {memberMethod()} 사이에 공백이 없습니다. 이 방법을 사용하면 두 선택기가 모두 일치해야합니다 (CSS의 .class1.class2과 같은 방식). 또한 결과 집합이 각 선택기에 의해 순서대로 필터링되고 hasCategoryId 메소드가없는 구성 요소가 있으면 '{hasCategoryId (1)}'로 중단됩니다.