Как связать сетку ExtJS с диаграммой JQuery

Question

У меня есть сетка ExtJS и диаграмма JQuery Gauge. Я хочу взаимодействовать между диаграммой и сеткой. Если выбрать строку в сетке то соответствующие изменения будут отражены в таблице .. Это код для сетки ....

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; 
     }); 
    }); 

Answer 1

Как только вы закончите с событием click, попробуйте использовать этот метод.

selectionchange : function(){ 
    var grid = Ext.getCmp('edgesGridChart'); 
    var selectedRecords= grid.getView().getSelectionModel().getSelection(); 
    myData = selectedRecords[0].get('columnName'); 

    var jquery= $('#jqRadialGauge').jqRadialGauge('option', 'scales'); 
    jquery[0].needles[0].value = myData ; 
    $('#jqRadialGauge').jqRadialGauge('update'); 

},  

Answer 2

Это высокий уровень объяснение того, как вы можете достичь ... фактическая реализация будет меняться.

В строке щелчка сетки задайте значения и обновите данные модели jquery, после чего вам нужно найти способ обновить график при обновлении модели данных.

Все это можно сделать с помощью специального события jquery, которое запускается из строки редактирования/щелчка строки extjs.

Answer 3

jqRadialGauge плагин может быть обновлен с помощью следующего кода:

  var scales = $('#jqRadialGauge').jqRadialGauge('option', 'scales'); 
      scales[0].needles[0].value = Math.random() * 100; 

      $('#jqRadialGauge').jqRadialGauge('update'); 

В случае, если вы хотите обновить иглу в jqRadialGauge, когда ExtJS сетки строка щелкнул вы можете попробовать использовать следующий код:

$('#edgesGridChart').on('rowclick', function(grid, rowIndex, columnIndex, e) { 
      var scales = $('#jqRadialGauge').jqRadialGauge('option', 'scales'); 
      scales[0].needles[0].value = rowIndex; 

      $('#jqRadialGauge').jqRadialGauge('update'); 
     }, this); 

Код во втором фрагменте показывает, как установить первую иглу jqRadialGauge в индекс строки щелкнутой строки.

С наилучшими пожеланиями,
Максим Милев

Отказ от ответственности: Я работаю на jqChart.