javascript - キーが不明な折れ線グラフにストアを使用する ExtJS

Question

折れ線グラフを使用してブラウザーの使用状況を経時的に表示したいのですが、モデルを定義するときに、ブラウザーの名前をフィールドとしてハードコーディングしたくありません。

だから、私はこのようなことをしたくありません：

Ext.define('BrowserCount', {
        extend: 'Ext.data.Model',
        fields: [{
            name: 'Year',
            type: "int"
        }, {
            name: "Firefox",
            type: "int"
        }, {
            name: "MSIE",
            type: "int"
        }, {
            name: "Chrome",
            type: "int"
        }]
    });

    var browserCountStore = Ext.create('Ext.data.Store', {
        model: 'AggregatedBrowserUsage',
        data: [{
            Year: '2011',
            Firefox: 4952,
            MSIE: 4613,
            Chrome: 1401
        }, {
            Year: '2012',
            Firefox: 952,
            MSIE: 613,
            Chrome: 401
        }]
    });

代わりに、次のようにモデルを定義したいと思います。

Ext.define('Browser', {
        extend: 'Ext.data.Model',
        fields: [{
            name: 'Browser',
            type: 'string'
        }, {
            name: 'Alias',
            type: 'string'
        }],
        hasMany: {
            model: 'AggregatedTotal',
            name: 'aggregatedtotal',
            associationkey: 'AggregatedTotals'
        }
    });

    Ext.define('AggregatedTotal', {
        extend: 'Ext.data.Model',
        fields: [{
            name: 'Year',
            type: 'int'
        }, {
            name: 'Count',
            type: 'int'
        }],
        belongsTo: 'Browser'
    });

    var browsers = Ext.create('Ext.data.Store', {
        model: 'Browser',
        data: [{
            Browser: 'Firefox',
            Alias: 'Firefox',
            AggregatedTotals: [{
                Year: 2011,
                Count: 4952
            }, {
                Year: 2012,
                Count: 999
            }]
        }, {
            Browser: 'Chrome',
            Alias: 'Chrome',
            AggregatedTotals: [{
                Year: 2011,
                Count: 3552
            }, {
                Year: 2012,
                Count: 6000
            }]
        }, {
            Browser: 'MSIE',
            Alias: 'Internet Explorer',
            AggregatedTotals: [{
                Year: 2011,
                Count: 100
            }, {
                Year: 2012,
                Count: 50
            }]
        }]
    });

後者の方法で定義されている場合、ストアが最初の例と同じ方法で定義されている場合と同じ情報を表示するように、チャートのストアおよびフィールド構成オプションを設定するにはどうすればよいですか? さらに、折れ線グラフの項目にアクセスしたりホバーしたりしたときに、Browser や Alias などの Browser モデルのフィールドにアクセスしたいと考えています (例を参照)。

例へのリンクを次に示します。