extjs - ExtJS 4.2.0 と外部データソースを使用して円グラフを完全に更新

Question

現在、「ドリルダウン」スタイルの円グラフを作成しています。「スライス」をクリックすると、そのスライス内のデータで円グラフが更新されます。

たとえば、トップ レベルのカテゴリ別に売上を示す E コマース レポートを想像してください。

シャツ - $10,000 パンツ - $8,000 靴 - $3,500

次に、「シャツ」スライスをクリックすると、シャツ カテゴリの売上に関する詳細情報が表示されます。

Tシャツ - $7,000 ポロシャツ - $2,000 タンクトップ - $1,000

ランダムな情報を返すデータ ソースを使用した基本的な例を次に示します。

http://jsfiddle.net/informationarchitec/BrMeh/

Ext.onReady(function () {

var level = 1;

Ext.define('Report', {
    extend: 'Ext.data.Model',
    fields: [{
        name: 'category',
        type: 'string'
    }, {
        name: 'purchases',
        type: 'string'
    }],
});

var store = Ext.create('Ext.data.Store', {
    id: 'store',
    model: 'Report',
    autoLoad: true,
    proxy: {
        type: 'jsonp',
        url: 'http://informationarchitech.com/demos/rand.php',
        reader: {
            root: 'content',
        }
    }
});

Ext.create('Ext.chart.Chart', {
    renderTo: Ext.getBody(),
    width: 500,
    height: 350,
    animate: true,
    store: store,
    series: [{
        listeners: {
            itemmousedown: function (obj) {
                level++;
                store.getProxy().url = 'http://informationarchitech.com/demos/rand.php?parent=' + obj.storeItem.data['category'] + '&level=' + level;
                store.load();
            }
        },
        type: 'pie',
        angleField: 'purchases',
        showInLegend: true,
        label: {
            field: 'category',
            display: 'rotate',
            contrast: true,
            font: '18px Arial'
        }
    }]
});
});

ご覧のとおり、スライスをクリックすると、一貫性のない動作が発生します。正しく更新されているように見えることもありますが、以前のデータを何らかの形でマージまたは上書きしているように見えることがよくあります。

チャートやストアなどで見つけられるすべての「クリア」、「更新」、「リセット」メソッドを試しましたが、新しいデータで円グラフを「完全に」更新することに成功したものはありません。誰が私が間違っているのか教えてもらえますか?