Ext.grid.Panel 열의 표시 페이지 데이터를 기반으로 저장소를 동적으로로드

Question

다음은 Ext.grid.Panel 열의 렌더러입니다. contactStore에 2,000 개의 값이 있다고 가정하고 id (이 경우 value 매개 변수)를 기반으로하는 레코드의 이름이 마음에 든다면 그리드에만 25 개의 행/레코드가 있습니다. 2,000 개의 레코드를 모두로드하는 대신 그리드 열 ID와 관련된 관련 레코드 (외래 키 기반)를 가져올 수 있도록 저장소를 동적으로 가져올 수 있습니까? 저장소를로드 한 다음 콜백에서 어떻게 든이 "렌더러"함수가 콜백 성공 후 값을 표시하도록 할 수 있습니까?

columns: [{ 

...

}, { 
    header: 'Contact Name', 
    flex: 1, 
    sortable: true, 
    dataIndex: 'contact_id',   
    renderer: function(value) { 
     var contactStore = Ext.StoreManager.lookup('Contacts'); 
     return contactStore.getById(value).get('full_name'); 
    } 
}, { 

Answer 1

당신은에 대한 viewConfig에서 collectData(records, startIndex)을 조정할 수 있습니다

Ext.create('Ext.grid.Panel', { 
    (...) 
    viewConfig: { 
     //this method needs to be adjusted 
     collectData: function(records, startIndex) { 
      var me = this; 
      //we can use a custom function for this 
      if (me.onBeforeCollectData) { 
       me.onBeforeCollectData(records); 
      }    
      var data = me.superclass.collectData.call(me, records, startIndex); 
      return data; 
     }, 

     onBeforeCollectData: function(records) { 
      var newExtraParams = []; 
      var oldExtraParams; 
      var needToLoadStore = false; 
      var contactStore = Ext.StoreManager.lookup('Contacts');   

      if (contactStore) { 
       oldExtraParams = contactStore.oldExtraParams; 
      } else { 
       //don't use autLoad: true, this will be a local store 
       contactStore = Ext.create('Ext.data.Store', { 
        storeId:'Contacts', 
        (...)     
       }); 
       needToLoadStore = true; 
      } 

      for (var x in records) { 
       //contact_id is read out here 
       var param = records[x].get('contact_id'); 
       if (param) { 
        if (needToLoadStore == false && Ext.Array.contains(oldExtraParams, param) == false) { 
         needToLoadStore = true; 
        } 
        newExtraParams.push(param); 
       }     
      }   

      if (needToLoadStore == true) { 
       //we use this to load the store data => because of async: false property 
       Ext.Ajax.request({ 
        scope: this, 
        //this is for synchronous calls 
        async: false, 
        url: (...), 
        method: (...), 
        params: newExtraParams, 
        success: function (res, opt) { 
         var responseObj = Ext.decode(res.responseText, false); 
         contactStore.loadData(responseObj); //or deeper in the responseObj if needed 
         contactStore.oldExtraParams = newExtraParams; 
        } 
       }); 
      } 
     } 
    } 
});