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"]})' 
     }) 
});