ExtJS 사용자 정의보기의 루트 속성에 액세스 하시겠습니까?/중복 구성 요소

Question

테스트 목적으로 2 개의 뷰를 만들었습니다. 하나는 다른보기가 필요합니다. 이제는 사람들이 탭으로 여러 번 구성 요소를 열 수 있기를 원하므로 구성 요소 안의 각 탭과 요소에 고유 한 ID를 할당해야합니다.

제 질문은 어떻게 docketItems 객체의 뷰에서 루트 속성 중 하나에 액세스 할 수 있습니까? 아래 코드에서 id: 'accountSearchField' + this.varindex,에 정의되지 않은 this.varindex 오류가 발생합니다. varindex는 다른 구성 요소에서 동적으로 할당됩니다. (아래의 예제 코드에서 하드 코드했습니다.)

정확한 ID를 알 수 없으므로 Ext.getCmp과 같은 것을 사용할 수 없습니다. Ext.ComponentQuery.query('searchAccount')을 사용할 수는 있지만 더 좋은 방법은 없을까요?

아래 나열된 내용은 내 주요 구성 요소에 필요한 코드의 일부입니다.

Ext.define('cp.views.search.Account', {  
    extend: 'Ext.panel.Panel',  
    xtype: 'searchAccount', 
    varindex: "uniqueid_assigned_by_main_component", 
    listeners: { 
     beforerender: function(){ 
      this.id = 'panelSearchAccount' + this.varindex 
     } 
    }, 
    items: [ 
     { 
      xtype: 'grid', 
      store: { 
       type: 'Account' 
      }, 
      id: 'searchAccount' + this.varindex, 
      columns: [ 
       /// 
      ], 
      dockedItems: [ 
      { 
       xtype: 'fieldset', 
       items: [ 
        { 
         id: 'accountSearchField' + this.varindex, 
         xtype: 'searchfield' 
        } 
       ] 
      }] 
     } 
    ] 
}); 

Answer 1

Ext는 DOM 요소에 대한 ID를 생성하고 페이지에 고유하도록합니다. 따라서 참조 구성 요소에 id 속성을 사용하는 것은 드뭅니다. 이 목적으로 itemId와 reference라는 두 가지 구성 속성이 있습니다.

부모 컨테이너 또는 전체적으로 itemId으로 구성 요소를 확보하는 데 사용할 수있는 여러 가지 방법이 있습니다.

Ext.ComponentQuery.query

또한

Ext.container.Container.child

Ext.container.Container.query

Ext.container.Container.downExt.container.Container.getComponent

• 이 구성 요소는 구성 refs Ext.app.Controllers 사용하여 얻을 수있다. 이 메서드는 selector 문자열을 사용합니다. itemId의 selector는 '#'이 앞에 붙은 itemId입니다 (예 : '#itemId'). itemId를 사용하여 구성 요소를 구성 할 때 '#'을 지정하지 마십시오.

  Ext JS 5의 MVVM에 대한 지원과 함께 도입 된 reference 식별자는 구성 요소의 컨테이너 또는 ViewController에 고유합니다. 구성 요소는 lookupReference을 사용하여 구성 요소 또는 ViewController에서 참조로 얻을 수 있습니다. lookupReference 메서드는 참조 만 입력으로 사용하므로 접두사가 필요하지 않습니다.

  특정 모델 인스턴스 (계정)와 연결된 구성 요소를 참조하려면 alias을 사용하여 구성 요소 클래스를 정의하고 각 인스턴스를 컨테이너에 추가 할 때 참조 또는 itemId를 구성 할 수 있습니다. 이 예에서

  for (var i = 0, ilen = accountModels.length; i < ilen; ++i) { 
      container.add({ 
       xtype: 'accountpanel', 
       reference: accountModel[i].get('accountNumber') 
      }); 
  } 
  

  는 계정과 연결된 패널은 계정 번호를 사용하여 나중에 획득 할 수있다.

  var accountPanel = this.lookupReference(accountModel.get('accountNumber')); 
  

Answer 2

사실 나는 그것을 알아 낸 것일 수 있습니다. 나는 단순히 beforerender 이벤트의 내부로 아이템을 옮기고 this.add() 함수를 사용했다.