是否可以将 ExtJs 5 与 Wijmo 集成？

Question

我打算使用ExtJS 5 来设计一个web 应用程序。 ExtJs 非常适合我想要的，但它缺少一些与数据的 excel 表示相关的功能。 ExtJs 提供的网格不适合我的情况。

我想知道是否有一种直接的方法可以集成到我的 ExtJS、Wijmo 中。有人 heard/tried 喜欢这样吗？

已编辑

我试过了，效果很好：

<!DOCTYPE html>
<html>
<head>
    <title>Ext JS</title>


    <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="app.js"></script>

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

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

    <!--RequireJs-->
    <script type="text/javascript" src="http://cdn.wijmo.com/external/require.js"></script>

    <script type="text/javascript">
    requirejs.config({
        baseUrl: "http://cdn.wijmo.com/amd-js/3.20143.59",
            paths: {
            "jquery": "jquery-1.11.1.min",
            "jquery-ui": "jquery-ui-1.11.0.custom.min",
            "jquery.ui": "jquery-ui",
            "jquery.mousewheel": "jquery.mousewheel.min",
            "globalize": "globalize.min",
            "bootstrap": "bootstrap.min", //Needed if you use Bootstrap.
            "knockout": "knockout-3.1.0" //Needed if you use Knockout.
            }
        });
    </script>

    <script id="scriptInit" type="text/javascript">
    require(["wijmo.wijgrid"], function () {
        $(document).ready(function () {
            $("#wijgrid").wijgrid({
                cellClicked: function (e, args) {
                    alert(args.cell.value());
                },
            allowSorting: true,
            allowPaging: true,
            pageSize: 3,
            data: [
                [27, 'George'],
                [43, 'Kostas'],
                [24, 'Dimitris'],
                [87, 'Bill'],
                [1, 'United States'],
            ],
            columns: [
                {headerText: "Number"},
                {headerText: "Name"},
            ]
            });
        });
    });
    </script>

</head>
<body>

app.js 文件中有：

Ext.application({
  name   : 'MyApp',

  launch : function() {

   Ext.create('Ext.Panel', {
        renderTo     : Ext.getBody(),
        width        : 400,
        height       : 250,
        bodyPadding  : 5,
        title        : 'This is EXTJS 5',
        html         : 'This is Wijmo shit <table id="wijgrid"></table>'
    });

}
});

但是当我尝试使用 Wijmo 的 spreadJs 组件时，它并没有真正起作用。我得到：

 Uncaught TypeError: undefined is not a function

这是我尝试 spreadJS 时的 index.html 文件：

<!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>
</html>

在我的 app.js 文件中，我有一个 div 标签和相应的 id:

 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;"/>'
    });

   }
  });

Answer 1

我相信你能做到。您在操作过程中遇到任何问题吗？

已编辑您的查询已在以下 link 中得到解答： http://wijmo.com/topic/use-spreadjs-with-extjs/

是否可以将 ExtJs 5 与 Wijmo 集成？

Is it possible to integrate ExtJs 5 with Wijmo?

extjs

wijmo