extjs - ExtJS 和 GoJS 集成（选项卡面板）

Question

我正在使用 GoJS 库和 ExtJS 构建一个图表应用程序。

GoJS 需要成为 div 的渲染器。

<div id="myDiagram" class="diagramStyle"></div>

我想抓住这个 div 并将其插入面板（选项卡面板）：

Ext.onReady(function () {

    Ext.create('Ext.container.Viewport', {
        layout: 'border',
        items: [
            {
                region: 'north',
                xtype: 'toolbar',
                padding: '5px',
                height: 45,
                items: [
                    'MyApp'
                ]
            },
            {
                region: 'center',
                xtype: 'tabpanel',
                margin: '5px',
                items: [
                    {
                        xtyope: 'panel',
                        title: 'panel1',
                        contentEl: Ext.get(myDiagram)
                    },
                    {
                        xtyope: 'panel',
                        title: 'panel2'
                    }
                ]
            }
        ]
    });

});

但是这种方法不起作用，当我单击图表进行编辑时出现一些错误。

   window.MSGesture && (a.po = new window.MSGesture, a.po.target = b, b.addEventListener("pointerdown", function(b) {
        a.po.addPointer(b.pointerId)

任何想法如何解决这一问题？还是有更好的方法来做到这一点？

提前致谢！

Answer 1

你可以试试：

Ext.onReady(function () {
    Ext.create('Ext.container.Viewport', {
        layout: 'border',
        items: [
            {
                region: 'north',
                xtype: 'toolbar',
                padding: '5px',
                height: 45,
                items: [
                    'MyApp'
                ]
            },
            {
                region: 'center',
                xtype: 'tabpanel',
                margin: '5px',
                items: [
                    {
                        xtype: 'panel',
                        title: 'panel1',
                        html: '<div id="myDiagram" class="diagramStyle"></div>'
                    },
                    {
                        xtype: 'panel',
                        title: 'panel2'
                    }
                ]
            }
        ]
    });

    var $ = go.GraphObject.make;
    var myDiagram = $(go.Diagram, "myDiagram", {
      // properties...
    });
});

注意面板上的 html 属性