하위 요소에 대한 ComponentQuery 선택자

Question

동적으로 구성된 컨트롤러/뷰 세트가 있으며 각각에 "선택기"목록과 "컨테이너"가 있으며 이러한 컨테이너에는 다른 선택기 + 컨테이너 쌍이있을 수 있습니다. 동일한 루트 선택기 + 컨테이너 컨트롤러의 인스턴스입니다.

이

는 컨트롤러의 제목 정의 (추상 클래스)입니다 :

Ext.define('MyApp.controller.explorer.Base', { 
    extend: 'Ext.app.Controller', 
    refs: [ 
     {ref: 'explorerContainer', selector: '[itemId="explorerContainer]'}, 
     {ref: 'explorerSelector', selector: '[itemId="explorerSelector]'} 
    ], 

것은 나는 그런 내 컨트롤러의 하위 요소에 맞게 ComponentQuery 선택해야 모르겠어요입니다 itemId. 구성 요소와 일치시키기 위해 [itemId = "explorerContainer"]를 사용하므로 전역 적으로 수행하므로 구성 트리에서 최상위 컨테이너에 응답합니다.

이전의 실험에서 ExtJS 3을 사용하여 myComponent.getComponent ('...')를 사용하여 하위 요소에 액세스했지만 이제는 getComponent()가 없으므로 ExtJS 4에서 해당 요소를 찾을 수 없습니다.

미리 감사드립니다.

Answer 1

질문에서보기가있는 비트 컨트롤러를 혼합하고 있습니다. 예 : "내 컨트롤러의 하위 요소" 컨트롤러는 구성 요소가 아니라 단지 이벤트 관찰자입니다. 뷰에는 하위 구성 요소 등이 있습니다.

클래스에 대해 좀 더 익숙해 져야합니다. 앱이나 데모 페이지에서 Firebug로 실험 해 볼 수 있습니다. 그냥 firebug 콘솔을 열어 Ext.ComponentQuery.query('panel')을 타이핑 한 다음, 패널을 올바른 표현식이라고 생각하는 것으로 바꾸고 테스트하십시오. Illuminations For Developers 플러그인을 설치하면 일반 JS 객체 대신 Ext 컴포넌트를 다시 얻을 수 있습니다. 이는 대단히 도움이됩니다.

문서에는 검색어의 몇 가지 예가 있습니다 : http://docs.sencha.com/ext-js/4-0/#!/api/Ext.ComponentQuery. ">"기호는 직계 하위 쿼리를 제한합니다.

희망이 도움이됩니다. 코드를 더 게시하지 않으면 일부 선택자를 만들 수 있습니다. 나는 그것의 하단이 발견

Answer 2

읽기 Ext.ComponentQuery 문서 :

을 "특정 컨테이너에서 기반 쿼리에 쉽게 액세스 할 수는 Ext.container.Container.query Ext.container를 참조하십시오. Container.down 및 Ext.container.Container.child 메서드. Ext.Component.up도 참조하십시오. "

그래서 Ext.container.ContainerView (위해 xtype : 용기 )는 셀렉터 스트링 인수 일치 첫번째 하위 요소에 응답 자식 ([선택기])을 구현한다.

http://docs.sencha.com/ext-js/4-0/#!/api/Ext.container.Container-method-child

그것은 내가 찾던 정확히 않습니다.

Answer 3

구성 요소에서 시작하여 하위 트리를 쿼리하려면 component.query ('selector')를 사용하면됩니다.