Question

我对网络开发和ExtJS都很陌生，我一直在寻找有关更复杂概念的教程，但很难找到（是的，我找到了Sencha文档，但只提供了简单的概念）

我正在尝试为我的应用程序制作仪表板，在此仪表板中我想要一个图表这给出了我的统计数据的详细概述。为了实现这一点，我试图为图表添加一个自定义过滤器，通过创建一个单独的列表来保存密钥的所有实例，当从列表中选择所述实例时，我希望图表只显示那些选定的实例。 / p>

我制作的图表：

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


    }] 


});

Answer 1

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

我们有一家商店，我们称之为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的内容中过滤掉它。

不幸的是，每次添加或更新新记录时，您都必须重新执行完全相同的过滤器...所以我所做的是将执行此操作的函数绑定到加载，更新，删除等。事件

Answer 2

您只需要过滤相关的数据存储。要完成此操作，请使用 filter 方法，如下所示：

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

您可以随时通过调用 clearFilter 商店的方法删除商店中的过滤功能，

chart.store.clearFilter();

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

您可以根据代码here查看一个小示例。希望它可以帮助您解决问题。

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

2 个答案: