如何使用列表过滤Extjs4.2图表

我对web开发和ExtJS非常陌生，我四处寻找过关于更复杂概念的教程，但很难找到（是的，我找到了Sencha文档，但只提供了简单的概念）

我正在尝试为我的应用程序制作一个仪表板，在这个仪表板中我想要一个图表 这是我的统计数据的详细概述。为了实现这一点，我试图为图表添加一个自定义过滤器，方法是创建一个单独的列表，其中包含该键的所有实例，当从列表中选择所述实例时，我希望图表仅显示那些选定的实例

我制作的图表：

Ext.define('view.chart.LocationStatisticsPerMonth', {
    extend: 'Ext.chart.Chart',
    alias: 'widget.LocationStatisticsPerMonthChart',
    requires: [
        'store.LocationStatisticsStore',
        'store.TemplateStore',
        'view.TitleToolbar'
    ],

    constructor: function () {
        this.store = Ext.create('store.LocationStatisticsStore', {
            autoLoad: true, sorters: [{
                property: 'YearMonth',
                direction: 'ASC'
            }]
        });
        this.store.getProxy().api.read = ServerControllers.Dashboard.LocationStatisticsPerMonth;
        this.callParent(arguments);
    },
    animate: true,
    shadow: true,
    border: true,

    legend: {
        position: 'right'
    },

    axes: [{
        type: 'Numeric',
        position: 'left',
        fields: ['TotalCount'],
        title: false,
        grid: true,
        label: {
            renderer: function (v) {
                return String(v);
            }
        }
    }, {
        type: 'Category',
        position: 'bottom',
        fields: ['Location_Id'],
        title: false,
        label: {
            rotate: {
                degrees: 315
            }


        }


    }],


    series: [{
        type: 'column',
        axis: 'left',
        gutter: 80,
        xField: ['Location_Id'],
        yField: ['TotalCount'],

        tips: {
            trackMouse: true,
            width: 125,
            height: 28,
            renderer: function(storeItem, item) {
                this.setTitle(String('Visitors: '+item.value[1]));
            }
        }
    }]
});

我的商店

Ext.define('store.LocationStatisticsStore', {
    extend: 'Ext.data.Store',
    requires: ['model.LocationStatistics'],
    model: 'model.LocationStatistics',
    autoLoad: false,
    remoteSort: false,
    remoteFilter: false,
    filterOnLoad: true,
    sorters: [{
        property: ['YearMonth' , 'Location_Id'],
        direction: 'DESC'
    }],
    proxy: {
        type: 'direct',
        paramOrder: [],
        api: {
            read: ServerControllers.Reports.GetLocationStatisticsPerMonth
        },
        reader: {
            type: 'json',
            root: 'data',
            totalProperty: 'totalRecords',
            successProperty: 'success',
            messageProperty: 'msg'
        }
    }
});

我的模型：

Ext.define('model.LocationStatistics', {
    extend: 'Ext.data.Model',
    idProperty: ['Location_Id'],
    fields: [
        { name: 'YearMonth', type: 'string' },
        { name: 'Location_Id', type: 'int' },
    { name: 'Year', type: 'int' },
        { name: 'Month', type: 'int' },
        { name: 'TotalCount', type: 'int' },
        { name: 'AverageCountPerDay', type: 'int' }
    ]

});

有没有人能给我解释一下这个概念，链接一个教程或者给我举个例子来说明如何去做

非常感谢您的帮助

编辑：包含此内容的面板：

 Ext.define('view.panel.DashboardStatisticsPanel', {
    extend    : 'Ext.panel.Panel',
    alias    : 'widget.DashboardStatisticsPanel',
    requires : [
        'Ext.layout.container.Column',
        'view.chart.LocationStatisticsPerMonth'
    ],
    plain: true,
    border: false,
    layout: {
        type: 'hbox',
        padding: '10 10 10 10'
    },



    items: [{
        xtype: 'panel',
        layout: 'fit',
        border: true,
        flex: 1,
        items: [{
            xtype: 'panel',
            layout: 'anchor',
            border: true,
            overflowX: 'scroll',
            height: 400,


            dockedItems: [{
            xtype: 'toolbar',
            dock: 'top',
            items: [{
                xtype: 'label',
                text: 'Select Date',
                padding: '0 0 0 10'
            },


                {
                xtype: 'combobox',
                displayField: 'YearMonth',
                emptyText: 'Select Date ',
                queryMode: 'local',
                padding: '0 0 0 10',
                store: function (btn) {
                    btn.up('panel').down('LocationStatisticsPerMonthChart').getStore();
                },
                valueField: 'YearMonth',

            }]
        }]
            /*tbar: [{


                text: 'September Only',
                handler: function (btn) {
                    var store = btn.up('panel').down('LocationStatisticsPerMonthChart').getStore();
                    store.clearFilter();
                    Ext.defer(function (btn) {
                        store.filter("Month", 9);
                    }, 300);
                }





            }]*/,
            items: [{
                xtype: 'LocationStatisticsPerMonthChart',
                itemId: 'LocationStatisticsPerMonthChart',
                anchor: '2000, -10',
                //height: 400,
               // width: 2000,
            }]

        }],
        dockedItems: [{
            xtype: 'TitleToolbar',
            dock: 'top',
            title: Resources.t('RegistrationsPerUnit'),
            items: ['->', {
                iconCls: 'iconRefresh',
                itemId: 'refresh',
                scope: this,
                handler: function (btn) {
                    var store = btn.up('panel').down('LocationStatisticsPerMonthChart').getStore();
                    //store.removeAll();
                    store.load();
                }
            }]
        }]


    }] 


});

---

您只需要筛选相关的数据存储。要完成此操作，请使用如下方法：

chart.store.filter("Month", 10);

通过调用存储区的方法，您始终可以删除存储区上的筛选

chart.store.clearFilter();

考虑到应用新过滤器时需要删除以前的过滤器，否则每个新应用的过滤器将与当前过滤器堆叠

---

您可以看到一个基于代码的小示例。希望它能帮助您解决问题。

最好的方法是使用函数，我给您举个例子：

我们有一家店，我们叫它StoreA，另一家叫StoreB

var storeA = something.getStore();
var storeB = somethingElse.getStore();

storeA.filterBy(function(record) {
    return storeB.find("name", record.data.name) != -1; 
});

因此，基本上在本例中，如果名称在storeB中（find返回一个索引），它将从storeA的内容中筛选出来

---

不幸的是，每次添加或更新新记录时，您都必须重新执行完全相同的筛选。。。所以我要做的是将一个函数绑定到load、update、delete等。。事件。

这不完全是我的想法，因为我试图在一个单独的窗口中使用一个单独填充的列表，但我会尝试把它弄得一团糟，看看是否能让它工作。我将在我的进度中发布此消息。是否要使用此列表进行筛选？（例如，您希望在图表上显示的月/年列表）或您希望将该列表用作图表本身的数据源（例如，符合筛选条件的记录列表）我在顶部添加了一个新片段，不幸的是，我被绑定到某个特定的文件结构，并且我很难从工具栏中为筛选选项定位图表。有什么建议吗？我确实想使用列表作为过滤器，我的目标是有两个列表，其中一个包含所有位置，另一个包含我希望在图表上显示的位置。当您谈论按位置过滤时，是否要使用LocationStatistics模型中定义的Location_Id字段过滤数据？如果是，这对我来说意义不大，因为该字段标记为idProperty，这意味着每个位置值最多只能有一个条目。