Extjs 중첩 모델에 액세스하는 방법 (XML에서로드)?

Question

Models의 'Associations'기능을 사용하는 데 어려움을 겪고 있고 개발자가 연관을 통해 중첩 된 데이터에 액세스 할 수있는 방법은 입니다.

여기 간단한 XML 파일을 구문 분석하려고합니다.

<?xml version="1.0" encoding="UTF-8"?> 
<contacts> 
    <contact> 
     <id>1</id> 
     <name>Bob Jones</name> 
     <emails> 
      <email> 
       <addr>bjones1@dom.com</addr> 
       <display>B. Jones 1</display> 
      </email> 
      <email> 
       <addr>bjones2@dom.com</addr> 
       <display>B. Jones 2</display> 
      </email> 
     </emails> 
    </contact> 
    <contact> 
     <id>2</id> 
     <name>John Rodeo</name> 
     <emails> 
      <email> 
       <addr>jrodeo1@dom.com</addr> 
       <display>J. Rodeo 1</display> 
      </email> 
      <email> 
       <addr>jrodeos2@dom.com</addr> 
       <display>J. Rodeo 2</display> 
      </email> 
     </emails> 
    </contact> 
</contacts> 

그리고 여기가 관련 모델

Ext.define('MyApp.model.Contact', { 
    extend: 'Ext.data.Model', 
    uses: [ 
     'MyApp.model.Emails' 
    ], 

    fields: [ 
     { 
      name: 'id' 
     }, 
     { 
      name: 'name' 
     } 
    ], 

    hasMany: { 
     model: 'MyApp.model.Emails', 
     autoLoad: true, 
     foreignKey: 'addr', 
     name: 'emailAddresses' 
    } 
}); 

Ext.define('MyApp.model.Emails', { 
    extend: 'Ext.data.Model', 
    uses: [ 
     'MyApp.model.Contact' 
    ], 

    idProperty: 'addr', 

    fields: [ 
     { 
      name: 'addr' 
     }, 
     { 
      name: 'display' 
     } 
    ], 

    belongsTo: { 
     model: 'MyApp.model.Contact' 
    } 
}); 

입니다 그리고 마지막으로, 여기에 가게의 :

Ext.define('MyApp.store.MyXmlStore', { 
    extend: 'Ext.data.Store', 
    requires: [ 
     'MyApp.model.Contact' 
    ], 

    constructor: function(cfg) { 
     var me = this; 
     cfg = cfg || {}; 
     me.callParent([Ext.apply({ 
      autoLoad: true, 
      storeId: 'MyXmlStore', 
      model: 'MyApp.model.Contact', 
      proxy: { 
       type: 'ajax', 
       url: 'data/data.xml', 
       reader: { 
        type: 'xml', 
        record: 'contact' 
       } 
      } 
     }, cfg)]); 
    } 
}); 

우리는 간단한 그리드를 생성하고 저장 ... 그리고 프레스토에 연결, 연락처를 표시합니다 (빠른 ASCII 렌더링)

+---------------------------+ 
| My Grid Panel    | 
+-----+---------------------+ 
| Id | Name    | 
+-----+---------------------+ 
| 1 | Bob Jones   | 
| 2 | John Rodeo   | 

그러나 우리는 관련 이메일 레코드를 검색하는 방법에 관해서는 완전히 손해보고 있습니다.

GridPanel이 연결된 데이터를 올바르게 렌더링하지 못할 수도 있음을 읽었습니다. 이것은 우리에게 아무런 문제가되지 않습니다. 단지 우리가이 가상 모형 데이터를 사용하여 프로그래밍 방식으로 접근 할 수있는 방법을 우리 주위에 두려고 노력하고 있습니다. . 예를 들어

,의 우리가 가게에 를 부착하는 간단한 onXmlstoreLoad 이벤트를 만들고 싶었 가정 해 봅시다 그리고 우리는 단지 이메일 주소 를로드 한 후) (CONSOLE.LOG 싶어 - 올바른 구문이 될 것입니다 무엇?

우리는 권장되는 방법 시도했다 :

onXmlstoreLoad: function(store, records, successful, operation, options) { 
    console.log(store.emailAddresses.getAt(0)); 
} 

을하지만이 정의되지 않은 참조가 발생합니다.

우리 모델에 대한 설명이 잘못되었을 수도 있지만, 수십 개의 다른 구성을 시도했지만 문제가 데이터가 상점에 들어 가지 않는지 알아낼 수 없습니다 ... 또는 우리가 참조 할 수 없는지 여부는 입니다.

Answer 1

마지막으로 올바르게 중첩 된 모델을 올바르게 읽을 수 없기 때문에 알아 냈습니다. 일단 상점을 올바르게 채우면 중첩 된 데이터 레코드에 액세스하는 것이 간단한 문제였습니다.

우리가 놓친 핵심 비트는 프록시/리더로해야만했습니다. 모델의 각자는 '기록'과 '루트'매개 변수를 지정할 수 있도록 자체 프록시 판독기가 있어야합니다.

나는이 스레드에 걸려 넘어지면 누구든지 Neil McGuigan - http://extjs-tutorials.blogspot.com/2012_05_01_archive.html이 유지 관리하는 우수한 사이트를 확인하는 것이 좋습니다. 중요한 조언이 많이 있습니다. & 모범 사례를 따라야합니다.

Neil이 우리 솔루션에 제공 한 단점은 개발자가 프록시가 아닌 모델에서 프록시를 중단해야한다는 것입니다. 이로써 Xml 특정 레코드/루트 매개 변수를 간단하게 관리 할 수있게되었습니다.

아주 힘들었습니다. Extjs의 최단 거리에 처음 들어가는 사람에게 방화범이 끌리는 것이 좋습니다.extjs 소스 코드에 들어가서 다양한 비트 & 조각이 어떻게 어울리는 지에 대한 중요한 질문에 대답하기 시작했습니다.

extjs 코드베이스는 매우 잘 문서화되어 있습니다. 그리고 개발자가 Javascript에서 분명히 검은 색 벨트를 사용하고 있지만 가끔 어디로 가는지 따라 가기가 어렵습니다. 최종 결과는 그만한 가치가 있습니다.

경우 당신은 우리의 상점

Ext.define('MyApp.store.MyXmlStore', { 
    extend: 'Ext.data.Store', 
    requires: [ 
     'MyApp.model.Contact' 
    ], 

    constructor: function(cfg) { 
     var me = this; 
     cfg = cfg || {}; 
     me.callParent([Ext.apply({ 
      autoLoad: true, 
      storeId: 'MyXmlStore', 
      model: 'MyApp.model.Contact', 
      listeners: { 
       load: { 
        fn: me.onXmlstoreLoad, 
        scope: me 
       } 
      } 
     }, cfg)]); 
    }, 

    onXmlstoreLoad: function(store, records, successful, operation, options) { 
     console.log("onXmlstoreLoad:"+ successful); 
     console.log(s.getAt(0).emailAddressesStore.getAt(0)); 

    } 

}); 

을 그리고 우리의 모델

... 작업 코드의 명성에 대한

Ext.define('MyApp.model.Contact', { 
    extend: 'Ext.data.Model', 
    uses: [ 
     'MyApp.model.Emails' 
    ], 

    fields: [ 
     { 
      mapping: 'id', 
      name: 'id', 
      type: 'int' 
     }, 
     { 
      mapping: 'name', 
      name: 'name', 
      type: 'string' 
     } 
    ], 

    hasMany: { 
     associationKey: 'emails', 
     model: 'MyApp.model.Emails', 
     name: 'emailAddresses' 
    }, 

    proxy: { 
     type: 'ajax', 
     url: 'data/data.xml', 
     reader: { 
      type: 'xml', 
      root: 'contacts', 
      record: 'contact' 
     } 
    } 
}); 
Ext.define('MyApp.model.Emails', { 
    extend: 'Ext.data.Model', 
    uses: [ 
     'MyApp.model.Contact' 
    ], 

    fields: [ 
     { 
      mapping: 'addr', 
      name: 'addr', 
      type: 'string' 
     }, 
     { 
      mapping: 'display', 
      name: 'display', 
      type: 'string' 
     } 
    ], 

    proxy: { 
     type: 'ajax', 
     url: 'data/data.xml', 
     reader: { 
      type: 'xml', 
      root: 'emails', 
      record: 'email' 
     } 
    }, 

    belongsTo: { 
     model: 'MyApp.model.Contact' 
    } 
});