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
            }]
        }]
    });

如果以后一种方式定义，我如何设置图表的商店和字段配置选项，使其显示相同的信息，就像商店的定义方式与第一个示例相同？此外，当访问/悬停折线图中的项目时，我想访问浏览器模型的字段，如浏览器和别名（参见示例）。

这是示例中的link。