0

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


    }] 


});
4

2 回答 2

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 的内容中过滤掉它。

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

于 2014-05-06T18:08:39.807 回答
0

您只需要过滤相关的数据存储。为此，请使用以下过滤器方法：

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

您始终可以通过调用clearFilter store 的方法来删除 store 上的过滤，

chart.store.clearFilter();

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

您可以在此处查看基于您的代码的小示例。希望它可以帮助您解决您的问题。

于 2013-10-23T08:53:33.423 回答