Proper way to catch resize events for a pane in GoldenLayout

I want to taken an action in one pane (i.e. a container content item) when a resize event occurs (whether resizing the panes, the whole browser, or zoom). The below works, but... if I then drag around the panes, even go from left-right, to right-left, or top-bottom, it stops working.

I'm assuming re-arranging panes resets something, and there is a proper way to get a persistent event handler. But I cannot work it out from the docs.

myLayout.on('initialised',initPanes);

function initPanes(){
myLayout.root.contentItems[0].contentItems[0].on('resize',function(){
    console.log("First pane resized");  //TEMP
    });
myLayout.root.contentItems[0].contentItems[1].on('resize',function(){
    console.log("Second pane resized");  //TEMP
    });
//...
}

Most probably you bind your resize handler to some intermediate layout object, like stack or column, and these might be destroyed and re-created when you re-arrange the layout, killing your listener in the process.

You can check the object type like that:

%myLayout.root.contentItems[0].contentItems[0].type
"stack"

You should bind your "resize" listener to the Component's container instead:

myLayout.on('componentCreated',function(component) {
    component.container.on('resize',function() {
        console.log('component.resize',component.componentName);
    });
});

to prevent it from being removed when you re-arrange the layout.