Integrating Ext 2.0 and Dojo 1.0

[ygjyothi]

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.Ther e 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

[acoder]

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.

[ygjyothi]

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.

  /**Ext Code
     * Returns the values of the selected entry in an array.
     */
    getSelected: function() {
        var selectedRow = [];
        var record = this.getSelectionModel().getSelected();
        var columnNames = this.tableDetails.column;
 
        if (record == null) {
            return selectedRow;
        }
        for (var i = 0; i < columnNames.length; i++) {
            selectedRow.push(record.get(columnNames[i]));
        }
 
        return selectedRow;
    },
 
    /**Ext Code
     * Returns the values of the selected entries in a two 
     * dimentional array.
     */
    getSelections: function() {
        var selectedRows = [];
        var records = this.getSelectionModel().getSelections();
        var columnNames = this.tableDetails.column;
 
        if (records == null) {
            return selectedRows;
        }
        for (var i = 0; i < records.length; i++) {
            var selectedRow = [];
            var record = records[i];
            for (var j = 0; j < columnNames.length; j++) {
                selectedRow.push(record.get(columnNames[j]));
            }
            selectedRows.push(selectedRow);
        }
 
        return selectedRows;
    },

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.

dojo.require("dojox.charting.Chart2D");
dojo.require("dojox.charting.themes.PlotKit.purple");
 
 
makeObjects = function(){
    var chart1 = new dojox.charting.Chart2D("test");
    chart1.addPlot("default", {type: "Areas"});
    chart1.addAxis("x", {fixLower: "minor", fixUpper: "major"});
    chart1.addAxis("y", {vertical: true, fixLower: "minor", fixUpper: "minor"});
    chart1.setTheme(dojox.charting.themes.PlotKit.purple);
    chart1.addSeries("Series A", [1, 2, 3, 1, 5, 2, 10]); /*Currently hardcoded*/
    chart1.render();
};
 
makeDynamicObjects = function(){
    chart = new dojox.charting.Chart2D("test");
    chart.addPlot("default", {type: "Areas"});
       chart.addAxis("x", {fixLower: "minor", fixUpper: "minor", natural: true});
    chart.addAxis("y", {vertical: true, fixLower: "major", fixUpper: "major", includeZero: true});
    chart.setTheme(dojox.charting.themes.PlotKit.purple);
    chart.addSeries("Series A", makeSeries(2));/*Currently hardcoded*/
    chart.render();
    setInterval("updateTest()", 1000);
};
 
makeSeries = function(len){
    var s = [];
    while(s.length-1!=len)
        s.push((Math.random()*25+1));
    return s;
}
 
updateTest = function(){
    updateChart(chart, makeSeries(3));
}
 
updateChart = function(chart /* Chart Object */, newData /* Array */){
  var i = 0;
    dojo.forEach(chart.series, function(s) {
        s.data.shift(); //remove oldest data
        s.data.push(newData[i++]);
    });
    chart.render();
}
dojo.addOnLoad(makeObjects);
dojo.addOnLoad(makeDynamicObjects);

Please tell me how to pass the array values from Ext to Dojo.

[acoder]

Set the result of the Ext function to a variable, e.g. var extArr = ..., then pass this to the addSeries method:

chart1.addSeries("Series A", extArr);