Question

我计划使用ExtJS 5来设计Web应用程序。 ExtJs非常适合我想要的东西，但它缺少与excel数据表示相关的功能。 ExtJs提供的网格并不适合我的情况。

我想知道是否有一种直接的方法可以集成到我的ExtJS，Wijmo中。有没有人听过/试过这样的事情？

EDITED

我试过这个并且工作正常：

<!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文件中，我有一个带有相应ID的div标签：

 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

我相信你能做到。在做这件事时你是否面临任何问题？

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

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

1 个答案: