0
화면 상에 두 개의 개체, 그리드 및 차트가 동일한 저장소에 채워집니다. 내가해야 할 일은 그리드에서 클릭 한 항목과 관련된 차트의 열을 강조 표시하는 것입니다.ExtJS를 사용하여 그리드의 관련 데이터를 클릭하면 차트의 막대 강조 표시 4
함수에서 나는 반쪽 길이 Ext.getCmp ('chart'). series.get (0)을 사용하여 계산했습니다. 아래 그러나 getItemForPoint (X, Y)가 null 값을 반환 유지로, 시리즈의 각 항목에 도착하고 그것을 강조하기 위해 무엇을 해야할지하지 않습니다 ...
고마워, 코드 :
// Code for my grid
{
columnWidth: .25
,xtype: 'grid'
,hideHeaders: true
,border: true
,styke: 'padding-top: 60px;'
,height: 360
,store: participation
,columns: [{
dataIndex: 'ID'
,width: 24
},{
dataIndex: 'Supplier'
,width: 204
}]
,listeners: {
select: function() {
// function to highlight the column on my chart
}
}
}
// Code for my chart
{
border: false
,layout: 'column'
,items: [{
columnWidth: .75
,xtype: 'chart'
,animate: true
,height: 432
,shadow: false
,id: 'chart'
,store: participation
,axes: [{
type: 'Numeric'
,position: 'left'
,grid: true
,fields: 'Participation'
,title: 'Share'
,label: {
renderer: Ext.util.Format.numberRenderer('0.00'+"%")
}
},{
type: 'Category'
,position: 'bottom'
,fields: 'ID'
}]
,series: [{
type: 'column'
,axis: 'left'
,highlight: 'true'
,xField: 'ID'
,yField: 'Participation'
,tips: {
trackMouse: true
,width: 312
,maxWidth: 360
,height: 36
,constrainPosition: true
,renderer: function(storeItem, item) {
this.setTitle('Supplier: ' + storeItem.get('Supplier')+'<br/>'+'Share: ' + Ext.util.Format.number(storeItem.get('Share'),"0.00")+'%');
}
}
,style: {
lineWidth: 1
,stroke: '#666'
}
}]
}
}