ExtJS和GoJS集成(tabpanel)

时间:2015-07-08 14:31:54

标签: extjs gojs

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

任何想法如何解决这个问题?或者有更好的方法吗?

提前致谢!

1 个答案:

答案 0 :(得分:0)

你可以尝试:

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属性