By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
434,847 Members | 2,296 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 434,847 IT Pros & Developers. It's quick & easy.

Integrating Ext 2.0 and Dojo 1.0

P: 2
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
Share this Question
Share on Google+
3 Replies


acoder
Expert Mod 15k+
P: 16,027
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

P: 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
Expert Mod 15k+
P: 16,027
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.