469,644 Members | 1,982 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,644 developers. It's quick & easy.

Integrating Ext 2.0 and Dojo 1.0

Hi All,

I'm trying to integrate Ext2.0 and Dojo 1.0 i.e the selected rows from a Ext 2.0 Grid upon a button click should generate a Dojo 1.0 Chart in a pop up window or Ext.window.There is a Ext 2.0 Grid which gets values from the database. When the user selects some rows and gives a request for Graphical view by clicking a Ext button or Ext handler, a Dojo 1.0 Chart must be generated for the selected rows in the Ext window (pop up window). The Chart should take the Row headers and column headers as X and Y axis.
I tried many ways to pass the data but it is not happening ....can anyone help me in this regard with code ....

Thanks & Regards
Jyothi
Jan 10 '08 #1
3 2160
acoder
16,027 Expert Mod 8TB
Hi Jyothi, welcome to TSDN!

I've not used either of Ext or Dojo, but if you post your code and the format that the data should take, either myself or someone else may be able to help you.
Jan 10 '08 #2
This is the Ext code in which getSelected is a function that returns a record i.e the selected entry in an array and the getSelections is a function that returns an array of records i.e a two dimentional array.

Expand|Select|Wrap|Line Numbers
  1.   /**Ext Code
  2.      * Returns the values of the selected entry in an array.
  3.      */
  4.     getSelected: function() {
  5.         var selectedRow = [];
  6.         var record = this.getSelectionModel().getSelected();
  7.         var columnNames = this.tableDetails.column;
  8.  
  9.         if (record == null) {
  10.             return selectedRow;
  11.         }
  12.         for (var i = 0; i < columnNames.length; i++) {
  13.             selectedRow.push(record.get(columnNames[i]));
  14.         }
  15.  
  16.         return selectedRow;
  17.     },
  18.  
  19.     /**Ext Code
  20.      * Returns the values of the selected entries in a two 
  21.      * dimentional array.
  22.      */
  23.     getSelections: function() {
  24.         var selectedRows = [];
  25.         var records = this.getSelectionModel().getSelections();
  26.         var columnNames = this.tableDetails.column;
  27.  
  28.         if (records == null) {
  29.             return selectedRows;
  30.         }
  31.         for (var i = 0; i < records.length; i++) {
  32.             var selectedRow = [];
  33.             var record = records[i];
  34.             for (var j = 0; j < columnNames.length; j++) {
  35.                 selectedRow.push(record.get(columnNames[j]));
  36.             }
  37.             selectedRows.push(selectedRow);
  38.         }
  39.  
  40.         return selectedRows;
  41.     },

The dojo which geterates the chart should take these values as input in the addseries() function which take an array as input. The headers in the Ext grid/Ext table should be the X and Y axis of the Dojo Chart/Graph. Both use Javascript.


Expand|Select|Wrap|Line Numbers
  1. dojo.require("dojox.charting.Chart2D");
  2. dojo.require("dojox.charting.themes.PlotKit.purple");
  3.  
  4.  
  5. makeObjects = function(){
  6.     var chart1 = new dojox.charting.Chart2D("test");
  7.     chart1.addPlot("default", {type: "Areas"});
  8.     chart1.addAxis("x", {fixLower: "minor", fixUpper: "major"});
  9.     chart1.addAxis("y", {vertical: true, fixLower: "minor", fixUpper: "minor"});
  10.     chart1.setTheme(dojox.charting.themes.PlotKit.purple);
  11.     chart1.addSeries("Series A", [1, 2, 3, 1, 5, 2, 10]); /*Currently hardcoded*/
  12.     chart1.render();
  13. };
  14.  
  15. makeDynamicObjects = function(){
  16.     chart = new dojox.charting.Chart2D("test");
  17.     chart.addPlot("default", {type: "Areas"});
  18.        chart.addAxis("x", {fixLower: "minor", fixUpper: "minor", natural: true});
  19.     chart.addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", includeZero: true});
  20.     chart.setTheme(dojox.charting.themes.PlotKit.purple);
  21.     chart.addSeries("Series A", makeSeries(2));/*Currently hardcoded*/
  22.     chart.render();
  23.     setInterval("updateTest()", 1000);
  24. };
  25.  
  26. makeSeries = function(len){
  27.     var s = [];
  28.     while(s.length-1!=len)
  29.         s.push((Math.random()*25+1));
  30.     return s;
  31. }
  32.  
  33. updateTest = function(){
  34.     updateChart(chart, makeSeries(3));
  35. }
  36.  
  37. updateChart = function(chart /* Chart Object */, newData /* Array */){
  38.   var i = 0;
  39.     dojo.forEach(chart.series, function(s) {
  40.         s.data.shift(); //remove oldest data
  41.         s.data.push(newData[i++]);
  42.     });
  43.     chart.render();
  44. }
  45. dojo.addOnLoad(makeObjects);
  46. dojo.addOnLoad(makeDynamicObjects);
Please tell me how to pass the array values from Ext to Dojo.
Jan 11 '08 #3
acoder
16,027 Expert Mod 8TB
Set the result of the Ext function to a variable, e.g. var extArr = ..., then pass this to the addSeries method:
Expand|Select|Wrap|Line Numbers
  1. chart1.addSeries("Series A", extArr);
Jan 11 '08 #4

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

1 post views Thread by drosensnap | last post: by
2 posts views Thread by Roger (Bordeaux) | last post: by
2 posts views Thread by pincopallo_it | last post: by
reply views Thread by gheharukoh7 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.