golden layout 가상 dom이라는게 이런것 이구나.

가상 dom이라는 걸 글로만 봐서 그리고 앙귤라는 그런건 id가 보여서..

이런거라고는 생각도 못했었다.

이야기를 풀자면 이렇다.
동일한 컴포넌트 창으로 2개가 열리지 않게 하고
하나가 열려있을때는 포커스가 되도록 구현하려고 했다.

componetName으로 컴포넌트 별로 구분하여 창이 여러개 안열리도록 설정은 했는데
focus를 주는게 쉽지 않았다.
인터넷에 찾아보니
https://github.com/golden-layout/golden-layout/issues/430

Switching active tabs programatically · Issue #430 · golden-layout/golden-layout

내용이 있었다.

// Grab the stack component so we can check current active
    var tempStack = myLayout.root.getItemsById('testStack')[0];
    var tempTab = null; // to be used later
    var curTab = null; // as above

// Check what the current tab is
    curTab = tempStack.getActiveContentItem();
    if (curTab.config.id == 'testTabA') {
        // we want to switch to TabB
        tempTab = myLayout.root.getItemsById('testTabB')[0];
    } else {
        // we want TabA
        tempTab = myLayout.root.getItemsById('testTabA')[0];
    }
// Do the actual swap bit
    tempStack.setActiveContentItem(tempTab);

내가 여기서 애를 먹었던 이유는
어느 예제에서도 componet에 id를 주고 있지 않았고 
id를 주어도 개발자도구에서 id를 확인할수 없어 id가 없다고 생각하고 있었다.

id를 주어도

id를 확인할수 없다.
그래서 id가 안먹히는줄 알았다.
그런데 혹시나해서 console창에서 입력을 해보니 있다 있어!!

정황상 config에 id를 인지 하는 듯하다.

var tmp=myLayout.root.getItemsById('stack_window')[0]
var tmp_a=myLayout.root.getItemsById('a')[0]
var tmp_b=myLayout.root.getItemsById('b')[0]
tmp.setActiveContentItem(tmp_a)
tmp.setActiveContentItem(tmp_b)

이렇게 하면 탭을 움직일수있다.