ExtJS 和 GoJS 集成（选项卡面板）答案

【问题标题】：ExtJS and GoJS integration (tabpanel)ExtJS 和 GoJS 集成（选项卡面板）
【发布时间】：2015-07-08 14:31:54
【问题描述】：

我正在使用 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)

任何想法如何解决这个问题？还是有更好的方法？

提前致谢！

【问题讨论】：

有什么错误？

标签： extjs gojs

【解决方案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属性

【讨论】：