我是Ext JS 6.5（Ext js 6.2）的新手，在运行我的代码时遇到错误：
Ext.mixin.Bindable.applyBind（）：无法绑定Ext.chart.CartesianChart上的过滤器 - 缺少setFilters方法。
tab1中的图表工作正常。我正在尝试做的是，将选项从tab2中的组合框绑定到下一个选项卡中的笛卡尔图表，我收到错误。任何人都可以帮助，请提前致谢，我的代码是：
商店：2FAData.js
Ext.define('LICApp.store.2FAData', {
extend: 'Ext.data.Store',
alias: 'store.2fa-data',
storeId: 'myStore',
requires: [
'Ext.data.reader.Xml'
],
autoLoad: false, // Set it to false
fields: ['name','cnt', 'zone'],
proxy: {
type: 'rest',
cors: 'true',
url : 'http://localhost:8080/UserManagement/rest/BiodataController/bio',
method: 'POST',
reader: {
type: 'xml',
record: 'biodata',
rootProperty: 'biodatas'
}
}
});
Basic.js
Ext.define('LICApp.view.charts.bar3d.Basic', {
extend: 'Ext.tab.Panel',
xtype: 'bar-basic-3d',
controller: 'bar-basic-3d',
requires: [
'Ext.chart.theme.Muted',
'LICApp.store.2FAData',
'LICApp.store.Chartdata'
],
//width: 1300,
layout: 'anchor',
defaults: { anchor: '-30' },
referenceHolder: true,
viewModel: true,
config: {
value: false
},
items: [{
xtype: 'cartesian',
title: 'Consolidated View',
reference: 'chart',
theme: 'Muted',
width: '100%',
height: 700,
legend: {
docked: 'right'
},
animation: Ext.isIE8 ? false : {
easing: 'backOut',
duration: 500
},
store: {type: 'chartdata',autoLoad:true},
insetPadding: 40,
flipXY: true,
axes: [{
type: 'numeric3d',
position: 'bottom',
grid: true,
minimum: 0,
//maximum: 100,
//majorTickSteps: 10,
renderer: 'onAxisLabelRender1'
}, {
type: 'category3d',
position: 'left',
grid: true
}],
series: [{
type: 'bar3d',
fullStack: false,
title: [ 'Concurrencia Enabled', 'eFeap Enabled', 'Authorised Users', 'Biometric Enrolled Users', 'Total Devices Issued', 'Total No. of Employees'],
xField: 'zone',
yField: [ 'data1', 'data2', 'data3', 'data4', 'data5', 'data6'],
axis: 'bottom',
stacked: false,
highlight: true,
tooltip: {
trackMouse: true,
renderer: 'onSeriesTooltipRender1'
}
}],
sprites: [{
type: 'text',
text: '2FA Biometric Progress - Zonewise comparison',
fontSize: 22,
width: 100,
height: 30,
x: 450, // the sprite x position
y: 20 // the sprite y position
},
{
type: 'text',
text: 'Source: 2FA Data Server',
fontSize: 10,
x: 12,
y: 695
}]
},
{
xtype: 'combobox',
title : 'Zone Selection',
reference: 'zone',
fieldLabel: 'Choose Zone',
store: {
type: 'chartdata',autoLoad:true
},
valueField: 'zone',
displayField: 'zone',
publishes: 'value',
typeAhead: true,
queryMode: 'local',
triggerAction: 'all',
emptyText: 'Select a Zone...',
selectOnFocus: true,
//width: 300,
indent: true,
renderTo: Ext.getBody(),
listeners: {
select: 'onZoneSelected'
}
},
{
xtype: 'cartesian',
itemId: 'zchart',
title: 'Zonewise View',
flipXY: true,
reference: 'chart',
width: '100%',
height: 500,
insetPadding: '40 40 30 40',
innerPadding: '3 0 0 0',
theme: {
type: 'muted'
},
store: {
type: '2fa-data', autoLoad :true
},
bind: {
visible: '{zone.value}',
filters: {
property: 'zone',
value: '{zone.value}'
}
},
animation: {
easing: 'easeOut',
duration: 500
},
interactions: ['itemhighlight'],
axes: [{
type: 'numeric3d',
renderer: 'onAxisLabelRender',
title: 'Number of Employees',
grid: {
odd: {
fillStyle: 'rgba(245, 245, 245, 1.0)'
},
even: {
fillStyle: 'rgba(255, 255, 255, 1.0)'
}
}
}, {
type: 'category3d',
position: 'left',
label: {
textAlign: 'right'
},
grid: true
}],
series: [{
type: 'bar3d',
xField: 'name',
yField: 'cnt',
style: {
minGapWidth: 10
},
highlight: true,
label: {
field: 'cnt',
display: 'insideEnd',
renderer: 'onSeriesLabelRender'
},
tooltip: {
trackMouse: true,
renderer: 'onSeriesTooltipRender'
}
}],
sprites: [{
type: 'text',
text: '2FA Biometric - Zonewise Progress Chart',
fontSize: 22,
width: 100,
height: 30,
x: 40, // the sprite x position
y: 20 // the sprite y position
}, {
type: 'text',
text: 'Source: 2FA Data Server',
fontSize: 10,
x: 12,
y: 490
}]
}
]
});
BasicController.js
Ext.define('LICApp.view.charts.bar3d.BasicController', {
extend: 'Ext.app.ViewController',
alias: 'controller.bar-basic-3d',
onAxisLabelRender: function (axis, label, layoutContext) {
return Ext.util.Format.number(layoutContext.renderer(label) );
},
onSeriesLabelRender: function (v) {
return Ext.util.Format.number(v);
},
onSeriesTooltipRender: function (tooltip, record, item) {
var formatString = '0,000 ';
tooltip.setHtml(record.get('name') + ': ' +
Ext.util.Format.number(record.get('cnt'), formatString));
},
onPreview: function () {
if (Ext.isIE8) {
Ext.Msg.alert('Unsupported Operation', 'This operation requires a newer version of Internet Explorer.');
return;
}
var chart = this.lookupReference('chart');
chart.preview();
},
onItemSelected: function (sender, record) {
var zone = sender.getValue();
Ext.toast('You selected : ' + zone);
var store = Ext.getStore('myStore');
Ext.Ajax.request({
url: 'http://localhost:8080/UserManagement/rest/BiodataController/bio?zone='+zone,
timeout: 60000,
method: 'GET',
scope: this,
reader: {
type: 'xml',
record: 'biodata',
rootProperty: 'biodatas'
},
success: function(resp, request) {
var data = console.log(resp.responseText);
var myView = Ext.getCmp('zchart');
Ext.MessageBox.alert('Success', 'Data return from the server: '+ resp.responseText);
store.reLoad();//reload will be called, when AJAX call is successful.
/*
if ( window.DOMParser ) { // Standard
tmp = new DOMParser();
xml = tmp.parseFromString( resp.responseText , "text/xml" );
} else { // IE
xml = new ActiveXObject( "Microsoft.XMLDOM" );
xml.async = "false";
xml.loadXML( resp.responseText );
}
*/
autoLoad:true;
//store.load(resp.responseText);
//console.log(myView);
//store.setData(resp.responseText);
},
failure: function(resp, opts) {
},
callback: function(options, success, resp) {
}
});
},
onCombo1Selected: function (sender, record) {
var zone = sender.getValue();
Ext.toast('You selected : ' + zone );
},
onCombo2Selected: function (sender, record) {
var divn = sender.getValue();
Ext.toast('You selected : ' + divn + '-' + record.get('donm'));
},
onCombo3Selected: function (sender, record) {
var bran = sender.getValue();
Ext.toast('You selected : ' + record.get('bran'));
},
onZoneSelected: function (sender, record) {
var zone = sender.getValue();
Ext.toast('You selected : ' + zone );
},
// Controller entries for stacked bar
onAxisLabelRender1: function (axis, label, layoutContext) {
// Custom renderer overrides the native axis label renderer.
// Since we don't want to do anything fancy with the value
// ourselves except appending a '%' sign, but at the same time
// don't want to loose the formatting done by the native renderer,
// we let the native renderer process the value first.
return layoutContext.renderer(label) ;
},
onSeriesTooltipRender1: function (tooltip, record, item) {
var fieldIndex = Ext.Array.indexOf(item.series.getYField(), item.field),
zone = item.series.getTitle()[fieldIndex];
tooltip.setHtml(zone + ' of ' + record.get('zone') + ': ' +
record.get(item.field) + ' out of ' + record.get('data6') + ' Total');
},
onColumnRender1: function (v) {
return v ;
}
// Ends here
});
答案 0 :(得分：0)
这不会按你想要的方式工作 笛卡尔图没有自己的过滤机制，因此您无法通过数据绑定触发过滤器。 （如果我错了，请纠正我，但就我所知，你不能通过数据绑定设置子元素和属性，例如商店的过滤属性）
您必须采用oldschool路线并在ComboBox的侦听器中手动设置过滤器，如下所示：
onZoneSelected: function (sender, record) {
var zone = sender.getValue();
Ext.toast('You selected : ' + zone );
var zchart = sender.up().getComponent('#zchart');
zchart.store.setFilters([{property: 'zone', value: zone}]);
},