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() は、おそらく配列として、firebug コンソールにすべてのデータを表示しています。この投稿に従って試してみました。次に、この配列をグループ化ストアのデータとして呼び出す方法 (これが適切な方法である場合)。

これに関するリードは非常に役立ちます

ありがとう

サジド

4

1 に答える 1

0

私はまったく同じことをしようとしていました。私は2つのことを見つけました：

  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 に答える