Question

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

它使用在extjs框架上开发的Geoext web映射库。这里GeoExt.data.WMSCapabilitiesStore是用于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

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

您可以使用store.Each函数将数据从WMSCapabilitiesStore复制到分组存储
这就是麻烦 - 商店的加载是异步的，所以你必须使用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"]})'
        })
});

EXTJS 3.4 - 基于GeoExt.data.WMSCapabilitiesStore对网格面板进行分组

1 个答案: