GoldenLayout组件中无法加载fin-Hypergrid答案

【问题标题】：Unable to load fin-Hypergrid in GoldenLayout componentGoldenLayout组件中无法加载fin-Hypergrid
【发布时间】：2016-08-05 10:53:56
【问题描述】：

我正在尝试使用以下脚本将简单的 fin-Hypergrid 添加到 GoldenLayout 组件，但是我不断收到错误：

Uncaught TypeError: this.div.appendChild is not a function  @Hypergrid.js:854
Uncaught TypeError: Cannot set property 'range' of null     @Hypergrid.js:2132

HTML ,

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
</head>
<body>

<div id="fin-grid"></div>

<script src="https://openfin.github.io/fin-hypergrid/build/fin-hypergrid.js"></script>

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://golden-layout.com/files/latest/js/goldenlayout.min.js"></script>
<link type="text/css" rel="stylesheet" href="https://golden-layout.com/files/latest/css/goldenlayout-base.css" /></script>
<script>

var config = {
    content: [{
        type: 'stack',
        content: [
            {
            type: 'component',
            componentName: 'example',
            componentState: {}
        }           
        ]
    }]
};   
var myLayout = new GoldenLayout(config);

var hyperGridComponent = function (container, state) {
    this._hyperGridcontainer = container;

    container.on('open', this._createHyperGrid.bind(this));
};

hyperGridComponent.prototype._createHyperGrid = function () {
    var data = [
      { symbol: 'APPL', name: 'Apple Inc.', prevclose: 93.13 },
      { symbol: 'MSFT', name: 'Microsoft Corporation', prevclose: 51.91 },
      { symbol: 'TSLA', name: 'Tesla Motors Inc.', prevclose: 196.40 },
      { symbol: 'IBM', name: 'International Business Machines Corp', prevclose: 155.35 }
    ];
    var grid = new fin.Hypergrid(this._hyperGridcontainer.getElement(), { data: data });


    grid.addProperties({
        showRowNumbers: false,
        showFilterRow: false
    });

};

 myLayout.registerComponent('example', hyperGridComponent);
 myLayout.init();

 </script>
 </body>
 </html>

关于如何修复这些错误的任何想法？

【问题讨论】：

你确定 this._hyperGridcontainer.getElement() 返回一个有效的 div 元素吗？

标签： javascript jquery html canvas openfin

【解决方案1】：

这里是 Hypergrid 的维护者之一。我们发布了 Hypergrid 的新版本（请注意，它是“去聚合”版本）。

你能试试这个版本吗？ https://github.com/openfin/fin-hypergrid/

【讨论】：