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

我正在修改代碼以基於例如'name'對結果記錄進行分組。 一些如何我無法正確配置分組存儲。 這裏是我的代碼示例：

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（）顯示了firebug控制檯中的所有數據，可能是一個數組。我按照這個post試過了。如何在分組存儲中將這個數組作爲數據調用，如果這是一個好的做法。

對此有何鉛將是非常有益

感謝

Sajid

Answer 1

我希望做同樣的事情。我發現了兩件事情：

1. 可以使用store.Each函數從WMSCapabilitiesStore的數據複製到分組存儲
2. 這是麻煩 - 這家店的負載是異步的，所以你要一旦WMSCapabilitiesStore加載完成，使用store.on設置一個回調函數來填充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"]})' 
     }) 
});