EXTJS 3.4 - GeoExt.data.WMSCapabilitiesStore를 기반으로 그리드 패널 그룹화

Question

그룹화 저장소 및 그룹화보기를 사용하여 그리드 패널에 그룹화를 구현하려고합니다. 기본적으로이 링크에서 주어진 예제를 수정하고 싶습니다. http://api.geoext.org/1.1/examples/wms-capabilities.html

그것은 extjs라는 framework.Here GeoExt.data.WMSCapabilitiesStore에서 개발 Geoext 웹 매핑 라이브러리를 사용하고는 XML의 URL에서 데이터를 사용하는 저장소입니다. 샘플은 작업 XML은 여기에서 볼 수 있습니다 : url for xml

나는 그룹에 예를 들어, '이름'에 대한 기반으로 생성 된 기록을 코드를 수정하고 있습니다. 어떻게 그룹화 저장소를 올바르게 구성 할 수 없습니까?

var store; 
Ext.onReady(function() { 

    // create a new WMS capabilities store 
    store = new GeoExt.data.WMSCapabilitiesStore({ 
     url: "data.xml" 
    }); 

    // load the store with records derived from the doc at the above url 
    store.load(); 
    store.on('load',function(store,records,opts){      
       console.log(store.getRange()); 
      }); //show the array data in firebug console 


    var reader = new Ext.data.ArrayReader({ 
     fields: [{name: 'title'}, 
     {name: 'name'}, 
     {name: 'queryable'}, 
     {name: 'abstract'} 
     ]}); 
    var grpstore = new Ext.data.GroupingStore({ 
      data: store, 
      autoLoad: true, 
      reader: reader, 
      sortInfo:{field: 'title', direction: "ASC"}, 
      groupField:'name' 
     }); 

    //SP 

    // create a grid to display records from the store 
    var grid = new Ext.grid.GridPanel({ 
     title: "WMS Capabilities", 
     store: grpstore, 
     columns: [ 
      {header: "Title", dataIndex: "title", sortable: true}, 
      {header: "Name", dataIndex: "name", sortable: true}, 
      {header: "Queryable", dataIndex: "queryable", sortable: true, width: 70}, 
      {id: "description", header: "Description", dataIndex: "abstract"} 
     ], 
     view: new Ext.grid.GroupingView({ 
      forceFit:true, 
      groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})' 
     }), 
     frame:true, 
     width: 700, 
     height: 450, 
     collapsible: true, 
     animCollapse: false, 
     autoExpandColumn: "description", 
     listeners: { 
      rowdblclick: mapPreview 
     }, 
     iconCls: 'icon-grid', 
     fbar : ['->', { 
      text:'Clear Grouping', 
      iconCls: 'icon-clear-group', 
      handler : function(){ 
       store.clearGrouping(); 
      } 
     }], 
     renderTo: "capgrid" 
     }); 

    function mapPreview(grid, index) { 
     var record = grid.getStore().getAt(index); 
     var layer = record.getLayer().clone(); 

     var win = new Ext.Window({ 
      title: "Preview: " + record.get("title"), 
      width: 512, 
      height: 256, 
      layout: "fit", 
      items: [{ 
       xtype: "gx_mappanel", 
       layers: [layer], 
       extent: record.get("llbbox") 
      }] 
     }); 
     win.show(); 
    } 
}); 

내가 열에서 그룹 옵션 패널을 얻고 있지만, 그리드가 비어 : 여기 내 코드 샘플입니다. 그룹화 저장소의 데이터 입력에 많은 옵션을 시도했지만 작동하지 못했습니다. 'store'의 데이터를 배열로 가져온 다음 그룹화 저장소에서 다시 읽는 것이 좋은 방법입니까? 그러나 나는 그것을 작동하게 만들 수 없었다.

store.getRange()는 방화 벽 콘솔의 모든 데이터를 배열로 표시합니다. 나는이 post에 따라 그것을 시도했다. 이것이 좋은 방법 인 경우 그룹화 저장소에서이 배열을 데이터로 호출하는 방법.

이에 대한 모든 리드

감사

사지 드

Answer 1

나는 정확히 같은 일을 찾고 있었어요 매우 도움이 될 것입니다. - 가게의 로딩 당신이 그래서, 비동기

1. 당신은이 문제였다 그룹화 스토어
2. 에 WMSCapabilitiesStore에서 데이터를 복사 할 store.Each 기능을 사용할 수 있습니다 : 나는 두 가지를 발견 store.on을 사용하여 WMSCapabilitiesStore가로드 된 후 groupingStore를 채우는 콜백 함수를 설정합니다.

   store = new GeoExt.data.WMSCapabilitiesStore({ 
       url: "data.xml" 
   }); 
   store.load(); 
   
   grpStore = new Ext.data.GroupingStore({ 
       groupField: 'name', 
       sortInfo: {field: 'name', direction: 'ASC'}, 
       groupOnSort: true 
   }); 
   
   store.on('load', function(store, records, options) 
   { 
       store.each(function(eachItem) { 
        grpStore.add(eachItem); 
       }); 
   }); 
   
   
       var grid = new Ext.grid.GridPanel({ 
        store: grpStore, 
        columns: [ 
         {header: "Title", dataIndex: "title", sortable: true}, 
         {header: "Name", dataIndex: "name", sortable: true}, 
         {id: "description", header: "Description", dataIndex: "abstract"} 
        ], 
        autoExpandColumn: "description", 
        height: 300, 
        width: 650, 
        view: new Ext.grid.GroupingView({ 
         forcefit:true, 
         groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})' 
        }) 
   }); 
   

   : 여기

코드입니다