我对网络开发和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();
}
}]
}]
}]
});
答案 0 :(得分: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的内容中过滤掉它。
不幸的是,每次添加或更新新记录时,您都必须重新执行完全相同的过滤器...所以我所做的是将执行此操作的函数绑定到加载,更新,删除等。事件
答案 1 :(得分:0)
您只需要过滤相关的数据存储。要完成此操作,请使用 filter 方法,如下所示:
chart.store.filter("Month", 10);
您可以随时通过调用 clearFilter 商店的方法删除商店中的过滤功能,
chart.store.clearFilter();
考虑到在应用新过滤器时需要删除以前的过滤器,否则每个新应用过滤器将与当前过滤器叠加
您可以根据代码here查看一个小示例。希望它可以帮助您解决问题。