使用复选框列表动态添加系列

Question

var store = new Ext.data.JsonStore({
fields:['date', 'sales','vehicle_id'],
data: [
    {date:'2014-03-20', sales: 1500, vehicle_id: 1},
    {date:'2014-03-20', sales: 2000, vehicle_id: 2},
    {date:'2014-03-20', sales: 2500, vehicle_id: 3},
    {date:'2014-03-21', sales: 2000, vehicle_id: 1},
    {date:'2014-03-21', sales: 1200, vehicle_id: 2},
    {date:'2014-03-21', sales: 1500, vehicle_id: 3},
    {date:'2014-03-22', sales: 1600, vehicle_id: 1},
    {date:'2014-03-22', sales: 3600, vehicle_id: 2},
    {date:'2014-03-22', sales: 4300, vehicle_id: 3},
    {date:'2014-03-23', sales: 1100, vehicle_id: 1},
    {date:'2014-03-23', sales: 1200, vehicle_id: 2},
    {date:'2014-03-23', sales: 4500, vehicle_id: 3},
]
});

左侧面板有一个带复选框的网格面板， 选中第一行复选框后，将从JsonStore获取vehicle_id，

示例：选中复选框时，第一个网格面板行vehicle_id为3，
将选择vehicle_id等于3的商店，然后在右侧面板中添加动态系列

问题

1）如何仅选择vehicle_id等于3？ 2）并将带有vehicle_id = 3数据的系列添加到图表中？实际上是不添加，附加，当图表有系列时，则要添加新系列。

这是一个非常复杂的编码，有什么解决方案吗？

p / s：日期将在X轴中，销售额将为Y轴

这是我的布局代码，但内部没有jsonstore

Ext.define('MyApp.view.MyPanel2', {
    extend: 'Ext.panel.Panel',

    height: 519,
    width: 804,
    title: 'My Panel',

    initComponent: function() {
        var me = this;

        Ext.applyIf(me, {
            items: [
                {
                    xtype: 'container',
                    height: 441,
                    layout: {
                        align: 'stretch',
                        type: 'hbox'
                    },
                    items: [
                        {
                            xtype: 'gridpanel',
                            height: 250,
                            width: 464,
                            header: false,
                            title: 'My Grid Panel',
                            columns: [
                                {
                                    xtype: 'gridcolumn',
                                    dataIndex: 'string',
                                    text: 'Plat No'
                                }
                            ],
                            selModel: Ext.create('Ext.selection.CheckboxModel', {

                            }),
                            dockedItems: [
                                {
                                    xtype: 'toolbar',
                                    dock: 'top',
                                    items: [
                                        {
                                            xtype: 'datefield',
                                            fieldLabel: 'Start',
                                            labelWidth: 50
                                        },
                                        {
                                            xtype: 'datefield',
                                            fieldLabel: 'End',
                                            labelWidth: 50
                                        },
                                        {
                                            xtype: 'button',
                                            text: 'Generate'
                                        }
                                    ]
                                }
                            ]
                        },
                        {
                            xtype: 'chart',
                            height: 250,
                            width: 408,
                            animate: true,
                            insetPadding: 20,
                            axes: [
                                {
                                    type: 'Category',
                                    fields: [
                                        'x'
                                    ],
                                    title: 'Date Axis',
                                    position: 'bottom'
                                },
                                {
                                    type: 'Numeric',
                                    fields: [
                                        'y'
                                    ],
                                    title: 'Sales Axis',
                                    position: 'left'
                                }
                            ],
                            series: [
                                {
                                    type: 'line',
                                    xField: 'x',
                                    yField: 'y',
                                    smooth: 3
                                }
                            ]
                        }
                    ]
                }
            ]
        });

        me.callParent(arguments);
    }

});

Answer 1

您可以使用filterBy function

store.filterBy(this, function(record, id) {
  if(rec.get('vehicle_id') === "selected_id") {
    return true;
  }
  else {
    return false;
  }
});  

您还可以使用渲染器功能。 我不确定这种方法，但值得尝试。

series: [
{
  type: 'line',
  xField: 'x',
  yField: 'y',
  smooth: 3,
  renderer:  function(sprite, record, attributes, index, store) {
    //Access store and select related elements
  }
}
]

Answer 2

以下是工作示例：

Filter Chart based on the store value

基本上，您可以通过相关数据字段调用商店的filter功能。

handler: function() {
    /**
     * here we are defining a variable which will hold 
     * the vehicle value. In reality, you should bound
     * this value with your combobox. Whenever user
     * select the checkbox, you can call a special function
     * like below
     */
    var vehicle = 3;
    myStore.clearFilter(true);
    myStore.filter('vehicle_id', vehicle);
}