How can add diagram in Ext Js panel

GoJS
1

I am trying to add a GoJS diagram in the Ext JS panel. It is not showing the diagram, rather in the console for this.down("[xtype=‘panel’]").body.dom, showing

goJSError
goJSError1863×392 69.6 KB
.

index.html

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="resources/css/ext-all-gray.css">
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="gojs/go-debug.js"></script>
<script type="text/javascript" src="extjs_go_test.js"></script>

<body>
<div id="diagramDivTest" style="border: solid 1px blue; width:100%; height:150"></div>
</body>

extjs_go_test:

Ext.onReady(function () {
Ext.create("Ext.panel.Panel", {
    title: "Configuration",
    items: [
      {

        xtype: "panel",

        name: "Diagram",

        html: "<div id='diagram'>Hello</div>",

      },

    ],

    renderTo: "diagramDivTest",
    listeners: {
      afterrender: function () {
        var $ = go.GraphObject.make;
        myDiagram = $(go.Diagram, "diagram");
        myDiagram.nodeTemplate = $(
          go.Node,
          "Auto",
          $(
            go.Shape,
            "Rectangle",
            { fill: "white" },
            new go.Binding("fill", "color")
          ),
          $(go.TextBlock, "text", { margin: 10 }, new go.Binding("text", "key"))
        );
        myDiagram.linkTemplate = $(
          go.Link,
          $(go.Shape, { strokeWidth: 3 }, new go.Binding("stroke", "color")),
          $(
            go.Shape,
            { toArrow: "Standard", stroke: null },
            new go.Binding("fill", "color")
          )
        );

        var nodeData = [
          {
            key: "Alpha",
            color: "blue",
            loc: go.Spot.Right,
            name: "Don Meow",
          },
          { key: "Beta", color: "red", loc: go.Spot.Right, name: "Don !" },
        ];
        var linkData = [
          {
            to: "Beta",
            from: "Alpha",
            color: "green",
          },
        ];
        myDiagram.model = new go.GraphLinksModel(nodeData, linkData);
      },
    },
  });
});

Thanks in advance!

2

Why is the height 1px?

You might also want to read Resizing Diagrams -- Northwoods Software

3

Gotcha… Thanks Walter