Javascript 如何在ExtJS网格和Jquery图表之间建立关联
我有一个ExtJS网格和一个Jquery量表图表。我想在图表和网格之间进行交互。如果我们在网格中选择一行，则相应的更改将反映在图表中。。 这是网格的代码Javascript 如何在ExtJS网格和Jquery图表之间建立关联,javascript,jquery,extjs4,extjs4.1,Javascript,Jquery,Extjs4,Extjs4.1,我有一个ExtJS网格和一个Jquery量表图表。我想在图表和网格之间进行交互。如果我们在网格中选择一行，则相应的更改将反映在图表中。。 这是网格的代码 Ext.define('Gamma.view.EdgesGridChart' ,{ extend: 'Ext.grid.Panel', alias : 'widget.edgesGridChart', id: 'edgesGridChart', height: 300, width: Ext.getBody().getViewSize().w
Ext.define('Gamma.view.EdgesGridChart' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.edgesGridChart',
id: 'edgesGridChart',
height: 300,
width: Ext.getBody().getViewSize().width*0.4,
animate: true,
shadow: true,
title : 'Call Information',
store : 'Edges',
loadMask: true,
autoheight: true,
theme: 'Base',
dockedItems: [{
xtype: 'pagingtoolbar',
store: 'Edges',
dock: 'bottom',
displayInfo: true,
items: [
{
xtype: 'tbseparator'
}
]
}],
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})
],
selModel: {
selType: 'cellmodel'
},
initComponent: function() {
this.columns = [{
header: 'SOURCE',
dataIndex: 'source',
flex: 1
},{
header: 'TARGET',
dataIndex: 'target',
flex: 1
}, {
header: 'DIR',
dataIndex: 'dir',
flex: 1
}, {
header: 'PEG',
dataIndex: 'peg',
flex: 1
}, {
header: 'WEIGHT',
dataIndex: 'weight',
flex: 1
}];
this.callParent(arguments);
}
$(document).ready(function(){
var gradient1 = {
type: 'linearGradient',
x0: 0,
y0: 0.5,
x1: 1,
y1: 0.5,
colorStops: [{ offset: 0, color: '#C5F80B' },
{ offset: 1, color: '#6B8901'}]
};
var gradient2 = {
type: 'linearGradient',
x0: 0.5,
y0: 0,
x1: 0.5,
y1: 1,
colorStops: [{ offset: 0, color: '#FF3366' },
{ offset: 1, color: '#B2183E'}]
};
var anchorGradient = {
type: 'radialGradient',
x0: 0.35,
y0: 0.35,
r0: 0.0,
x1: 0.35,
y1: 0.35,
r1: 1,
colorStops: [{ offset: 0, color: '#4F6169' },
{ offset: 1, color: '#252E32'}]
};
$('#jqRadialGauge').jqRadialGauge({
background: '#F7F7F7',
border: {
lineWidth: 6,
strokeStyle: '#76786A',
padding: 16
},
shadows: {
enabled: true
},
anchor: {
visible: true,
fillStyle: anchorGradient,
radius: 0.05
},
tooltips: {
disabled: false,
highlighting: true
},
annotations: [
{
text: 'Wing Span',
font: '18px sans-serif',
horizontalOffset: 0.5,
verticalOffset: 0.8
}
],
scales: [
{
minimum: 0,
maximum: 150,
startAngle: 140,
endAngle: 400,
majorTickMarks: {
length: 12,
lineWidth: 2,
interval: 10,
offset: 0.84
},
minorTickMarks: {
visible: true,
length: 8,
lineWidth: 2,
interval: 2,
offset: 0.84
},
labels: {
orientation: 'horizontal',
interval: 10,
offset: 1.00
},
needles: [
{
value: 56,
type: 'pointer',
outerOffset: 0.8,
mediumOffset: 0.7,
width: 10,
fillStyle: '#252E32'
}
],
ranges: [
{
outerOffset: 0.82,
innerStartOffset: 0.76,
innerEndOffset: 0.68,
startValue: 0,
endValue: 100,
fillStyle: gradient1
},
{
outerOffset: 0.82,
innerStartOffset: 0.68,
innerEndOffset: 0.60,
startValue: 110,
endValue: 150,
fillStyle: gradient2
}
]
}
]
});
$('#jqRadialGauge').bind('tooltipFormat', function (e, data) {
var tooltip = '<b>Element: ' + data.elementType + '</b> ' + '</br>';
switch (data.elementType) {
case 'needle':
tooltip += 'Value: ' + data.value;
break;
case 'range':
tooltip += 'Start Value: ' + data.startValue + '<br/>End Value: ' + data.endValue;
}
return tooltip;
});
});
$（文档）.ready（函数（）{
变量梯度1={
类型：“linearGradient”，
x0:0，
y0:0.5，
x1:1，
y1:0.5，
颜色停止：[{偏移量：0，颜色：'#C5F80B'}，
{偏移量：1，颜色：'#6B8901'}]
};
变量梯度2={
类型：“linearGradient”，
x0:0.5，
y0:0，
x1:0.5，
y1:1，
颜色停止：[{偏移量：0，颜色：'#FF3366'}，
{偏移量：1，颜色：'#B2183E'}]
};
var AnchorRadient={
类型：'径向梯度'，
x0:0.35，
y0:0.35，
r0:0.0，
x1:0.35，
y1:0.35，
r1:1，
颜色停止：[{偏移量：0，颜色：'#4F6169'}，
{偏移量：1，颜色：'#252E32'}]
};
$（'jqRadialGauge'）。jqRadialGauge({
背景：“#F7F7F7”，
边界：{
线宽：6，
strokeStyle:“#76786A”，
填充：16
},
阴影：{
已启用：true
},
主播：{
可见：对，
填充样式：固定半径，
半径：0.05
},
工具提示：{
残疾人士:错,，
突出显示：正确
},
注释：[
{
文字：‘翼展’，
字体：“18px无衬线”，
水平偏移：0.5，
垂直偏移：0.8
}
],
比例：[
{
最低：0，
最高限额：150，
startAngle:140，
端角：400，
主要标志：{
长度：12，
线宽：2，
间隔时间：10，
偏移量：0.84
},
minorTickMarks：{
可见：对，
长度：8，
线宽：2，
间隔时间：2，
偏移量：0.84
},
标签：{
方向：“水平”，
间隔时间：10，
偏移量：1.00
},
针头：[
{
价值：56，
键入：“指针”，
outerOffset:0.8，
中偏移量：0.7，
宽度：10，
填充样式：“#252E32”
}
],
范围：[
{
outerOffset:0.82，
innerStartOffset:0.76，
内部内部偏移：0.68，
起始值：0，
终值：100，
填充样式：渐变1
},
{
outerOffset:0.82，
innerStartOffset:0.68，
内部内部偏移：0.60，
起始值：110，
终值：150，
填充样式：渐变2
}
]
}
]
});
$（'jqRadialGauge'）.bind（'tooltipFormat'，函数（e，数据）{
变量工具提示='元素：'+data.elementType+'+''；
开关（data.elementType）{
案例“针”：
工具提示+='值：'+data.Value；
打破
案例“范围”：
工具提示+='开始值：'+data.startValue+'
结束值：'+data.endValue；
}
返回工具提示；
});
});
所有这些都可以通过使用从extjs行编辑/单击事件触发的jquery自定义事件来完成。这是如何实现的高级解释…实际实现会有所不同 在网格的行单击上，设置值并更新jquery模型的数据，然后您需要找到一种在数据模型更新时刷新图表的方法
所有这些都可以通过使用从extjs行编辑/单击事件触发的jquery自定义事件来完成。可以使用以下代码更新jqRadialGauge插件：
var scales = $('#jqRadialGauge').jqRadialGauge('option', 'scales');
scales[0].needles[0].value = Math.random() * 100;
$('#jqRadialGauge').jqRadialGauge('update');
$('#edgesGridChart').on('rowclick', function(grid, rowIndex, columnIndex, e) {
var scales = $('#jqRadialGauge').jqRadialGauge('option', 'scales');
scales[0].needles[0].value = rowIndex;
$('#jqRadialGauge').jqRadialGauge('update');
}, this);
var scales = $('#jqRadialGauge').jqRadialGauge('option', 'scales');
scales[0].needles[0].value = Math.random() * 100;
$('#jqRadialGauge').jqRadialGauge('update');
$('#edgesGridChart').on('rowclick', function(grid, rowIndex, columnIndex, e) {
var scales = $('#jqRadialGauge').jqRadialGauge('option', 'scales');
scales[0].needles[0].value = rowIndex;
$('#jqRadialGauge').jqRadialGauge('update');
}, this);