0

我正在尝试使用分组存储和分组视图来实现对网格面板的分组。基本上我想修改此链接中给出的示例； http://api.geoext.org/1.1/examples/wms-capabilities.html

它使用在 extjs 框架上开发的 Geoext Web 地图库。这里 GeoExt.data.WMSCapabilitiesStore 是用于存储来自 XML 中的 url 的数据。可以在此处查看示例工作 xml： xml 的 url

我正在修改代码以根据例如“名称”对结果记录进行分组。有些我无法正确配置分组存储。这是我的代码示例：

 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.getRange() 显示了萤火虫控制台中的所有数据，可能是一个数组。我按照这篇文章试过了。如果这是一种很好的方法，那么如何将此数组称为分组存储中的数据。

这方面的任何线索都会非常有帮助

谢谢

萨吉德

4

1 回答 1

0

我想做同样的事情。我发现了两件事：

  1. 您可以使用 store.Each 函数将数据从 WMSCapabilitiesStore 复制到 Grouping Store
  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"]})'
        })
});
于 2012-08-22T00:52:51.630 回答