Search code examples
extjsspreadsheetwijmo

Error when running Wijmo SpreadJS through ExtJS

I have written a script which creates an Excel-like spreadsheet using Wijmo library (spreadJS). I try to integrate this spreadsheet inside an ExtJS panel but I get an error: Uncaught TypeError: undefined is not a function

I have two files. The first is the index.html where I have all the references to the libraries and the SpreadJS script like this:

 <!DOCTYPE html>
 <html>
  <head>

    <link rel="stylesheet" type="text/css" href="ext-5.1.0/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
    <script type="text/javascript" src="ext-5.1.0/packages/ext-theme-neptune/build/ext-theme-neptune.js"></script>
    <script type="text/javascript" src="ext-5.1.0/build/ext-all.js"></script>

    <script type ="text/javascript" src="appEx.js"></script>



    <!--jQuery References-->
    <script src="http://code.jquery.com/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js" type="text/javascript"></script>

    <!--Theme-->
    <link href="http://cdn.wijmo.com/themes/aristo/jquery-wijmo.css" rel="stylesheet" type="text/css" title="rocket-jqueryui"/>

    <!--Wijmo Widgets CSS-->
    <link href="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20131.3.min.css" rel="stylesheet" type="text/css" />

    <!--Wijmo Widgets JavaScript-->
    <script src="http://cdn.wijmo.com/jquery.wijmo-open.all.3.20131.3.min.js" type="text/javascript"></script>
    <script src="http://cdn.wijmo.com/jquery.wijmo-pro.all.3.20131.3.min.js" type="text/javascript"></script>

    <!-- SpreadJS CSS and script -->
    <script src="http://cdn.wijmo.com/spreadjs/jquery.wijmo.wijspread.all.1.20131.1.min.js" type="text/javascript"></script>
    <link href="http://cdn.wijmo.com/spreadjs/jquery.wijmo.wijspread.1.20131.1.css" rel="stylesheet" type="text/css" />

    <script type="text/javascript">
$(document).ready(function () {
            $("#ss").wijspread({ sheetCount: 2 }); // create wijspread widget instance
            var spread = $("#ss").wijspread("spread"); // get instance of wijspread widget
            var sheet = spread.getActiveSheet(); // get active worksheet of the wijspread widget
            // initialize spreadJS
        });
    </script>
</head>
<body>

</body>

The second file is the appEx.js where I have my ExtJS application:

Ext.application({
name   : 'MyApp',

launch : function() {

   Ext.create('Ext.Panel', {
        renderTo     : Ext.getBody(),
        width        : 800,
        height       : 600,
        bodyPadding  : 5,
        title        : 'This is EXTJS 5',
        html         : '<div id="ss" style="height:500px;border:solid gray 1px;"/>'
    });

}

});

Both of them run perfectly when running seperately but they don't give a result when trying to integrate them.

Does anyone has an idea where is the bug here? Thank you.

Solution

  • I could observe the issue with SpreadJS and have forwarded it to the development team for review.