GoJS + ExtJS

GoJS
1

hi i try to make function and put it inside the div element.
then i want to show it inside tab panel in extjs. why first reload, the function can be showed inside tab panel. but when i create new tab. the function of gojs was not shown inside the new tab. there’s no error message in firebug. anybody can help me.?

2

If you set a breakpoint on your GoJS Diagram initialization code for the second tab, is it executed at all?
Can you demonstrate the problem in a JSFiddle or CodePen?

3

hi , thx for the reply. i can’t run my gojs function with jsfiddle. can u give me some example to load gojs function with fiddle.? thx

4
this is my gojs function

function init(){
var makediagram;
var $ = go.GraphObject.make;
makediagram = $;
// konfigurasi ukuran grid
var cellSize = new go.Size(50,50); // ori
//diagramView();
var myDiagram = new diagramView($, cellSize);
}

function diagramView($, cellSize) // category : model, view
{
myDiagram =
$(go.Diagram, “myDiagram”,

{
    grid: $(
        go.Panel, "Grid", // jenis layer : Grid, Background, "", Foreground, Adornment, Tool
        {gridCellSize: cellSize},
        $(go.Shape, "LineH", {stroke: "lightgray"}),
        $(go.Shape, "LineV", {stroke: "lightgray"})
    ),

}
);

}

and i have div element like this.
that function works in the first tab of my extjs. but when i add new tab. myDiagram is empty.
5

The second argument to go.GraphObject.make, when the first argument is go.Diagram, should be either the name of the DIV or the DIV element itself. But if you want to have multiple Diagrams, perhaps one per tab, then you need to pass a different id or you need to pass a reference to the DIV. Because you are always passing the same id (“myDiagram”), the first time it will work, but the second time it will cause an error because there is already a Diagram associated with that DIV element.

But you should have seen the error message for this.

6

i’m sorry can you give me the example for this? in my case, there’s no error report when i see it in firebug.

7

You need to parameterize your “diagramView” function, which I assume you are calling each time you want to create a Diagram, so that it is given either the unique id or a reference to the actual DIV element where you want the Diagram to be.

So when you create the new “tab”, it will should have a new DIV element inside the tab, and you can pass that DIV to your function to create and initialize a new diagram.

8

i’ve try like this.

var i=1;

var elem = document.getElementById(i);
if(typeof elem !== ‘undefined’ && elem !== null) {
document.getElementById(i).innerHTML="<div id=myDiagram"+(i+1)+" style=‘border: solid 1px gray; height: 720px’>";
}
i=i+1;


every time i click and make a new tab. div id must be unique. but it doesn’t work. i am sorry can you give me some example of code.?

9

But when you create the go.Diagram in your diagramView function, you are passing the constant string “myDiagram”, without any numeric qualifier that would make it a unique identifier corresponding to an actual DIV element.

10

so i must make my diagramView function be dynamic.?

11

As I said above, you need to pass either the id for the DIV or a reference to the DIV to your diagramView function.

12

i’ve been try to change function like this.

function init(myDiagrams){
  alert('myDiagrams='+myDiagrams);
  var makediagram;
    var $ = go.GraphObject.make;
    makediagram = $;
    // konfigurasi ukuran grid
    var cellSize = new go.Size(50,50); // ori
  //diagramView();
  //var myDiagram = new diagramView($, cellSize, myDiagram);
  var myDiagram = new diagramView($, cellSize, myDiagrams);
}


function diagramView($,  cellSize, myDiagrams ) // category : model, view
{
    myDiagram =
    $(go.Diagram, myDiagrams,

    {
        grid: $(
            go.Panel, "Grid", // jenis layer : Grid, Background, "", Foreground, Adornment, Tool
            {gridCellSize: cellSize},
            $(go.Shape, "LineH", {stroke: "lightgray"}),
            $(go.Shape, "LineV", {stroke: "lightgray"})
        ),

    }
    );

}

in my index.html :

[code]
var i=1;

var myDiv = document.createElement(‘i’);
myDiv.id = ‘i’;
document.body.appendChild(myDiv);
var elem = document.getElementById(‘i’);

    if(typeof elem !== 'undefined' && elem !== null) {
        tes =  document.getElementById('i').innerHTML="<div id=centers"+(i+1)+" class=x-hide-display>\
        <div id=myDiagram"+(i+1)+" style='height: 720px'></div>\
        <div id=myOverview"+(i+1)+"></div></div>";
            i=i+1;

}


init(""+‘myDiagram’+(i)+"");
[/code]


but i have error message like this

Error: No canvas specified .
so what do you think about this.?
13

Do you know what document.createElement(‘i’) does?
Why are you calling document.getElementById(‘i’) repeatedly?
Do you know what this does: new diagramView($, cellSize, myDiagrams), when diagramView is defined as a regular function?
Why do you have the variable named “i” at all?
What ids do you declare in the innerHTML and what string do you pass to the init function?