(는 ExtJS 4.2.2)

Question

내가 가지고 적극적으로하지 않은 탭을 가져올 수 없습니다 컨테이너 페이지가 이미 활성화되어 있기 때문에 내가 먼저 탭을 얻을 수로드

items: [{ 
      xtype: 'container', 
      layout: 'card', 
      flex: 1, 
      itemId: 'tab-container', 
      deferredRender: false, 
      items: [ { 
       xtype: 'panel', 
       layout: 'fit', 
       dockedItems: [routessearch], 
       items: [routes] 
      }, { 
       xtype: 'panel', 
       layout: 'fit', 
       forceLayout: true, 
       dockedItems: [routessearch], 
       items: [routesSubs] 
      }] 
     }] 

. 하지만 두 번째 탭을 만들 수 없기 때문에 두 번째 탭을 가져올 수 없습니다.

코드 샘플과 같이 deferredRender : false 및 forceLayout : true를 사용하려고했지만 작동하지 않습니다.

Answer 1

ExtJs에서는 dom이 아닌 구성 요소와 상호 작용해야합니다.

따라서 var elements = document.querySelectorAll(query);을 Ext.ComponentQuery.query(query);으로 바꿀 때 일치하는 구성 요소의 배열이 생기고 그 배열과 상호 작용할 수 있습니다. Ext.ComponentQuery의 엽차 문서에서

:

는 Ext.ComponentManager (글로벌) 또는 CSS를 선택 유사한 구문을 사용하여 문서의 특정 Ext.container.Container 내에서 구성 요소의 검색을 제공합니다. 일치하는 배열 구성 요소를 반환하거나 빈 배열을 반환합니다.

그럼 구성 요소 쿼리 Ext.ComponentQuery.query('#tab-container > panel') 다음에 모든 내부 패널이 있습니다. second = components[1]에는 두 번째 참조가 있습니다. 이제 구성 요소와 상호 작용할 수 있습니다.
하지만 구성 요소의 DOM에 액세스해야하는 경우 second.getEl().dom까지 가져올 수 있습니다.

전체 코드는 다음과 같습니다.

Ext.create('Ext.container.Container', { 
    renderTo: Ext.getBody(), 
    width: 200, 
    height: 200, 
    layout: 'card', 
    itemId: 'tab-container', 
    deferredRender: false, 
    items: [{ 
     title: 'P1' 
    }, { 
     title: 'P2' 
    }], 
    listeners: { 
     boxready: function() { 
      var components = Ext.ComponentQuery.query('#tab-container > panel'); 
      var second = components[1]; 
      var el = second.getEl(); 
      var dom = el.dom; 
      // code to interact with the component or with the dom 
     } 
    } 
}); 

코드가 Sencha Fiddle 인 코드를 참조하십시오.