javascript - 黄金布局，动态添加项目时遇到问题

Question

请查看问题:

function newLayOutObj() {
    var config = {
        settings: {
            "hasHeaders": true,
            "constrainDragToContainer": false,
            "reorderEnabled": false,
            "selectionEnabled": false,
            "popoutWholeStack": false,
            "blockedPopoutsThrowError": false,
            "closePopoutsOnUnload": false,
            "showPopoutIcon": false,
            "showMaximiseIcon": true,
            "showCloseIcon": true,
            "responsiveMode": "onload"
        },
        content: [{
            type: 'column',
            content: [{
                    type: 'component',
                    "reorderEnabled": false,
                    "hasHeaders": false,
                    "isClosable": false,
                    "showPopoutIcon": false,
                    "showMaximiseIcon": false,
                    "showCloseIcon": false,
                    componentName: 'parrent',
                    componentState: {
                        text: 'Component 1',
                        id: "4587645"
                    }
                }


            ]
        }]
    };
    return config;
};
function add() {
    var newItemConfig = {
        type: 'component',
        componentName: 'parrent',
        width: 38.197,
    };
    layout.root.contentItems[0].addChild(newItemConfig);
};
layOutObj = new newLayOutObj();
layout = new GoldenLayout(layOutObj);
layout.container = "#golden";
layout.registerComponent('parrent', function (container, state) {
    container.getElement().html(`<h2 class="cname" >Component </h2>`);
});

layout.init();

$(function(){
$('#add').click(function(){ add(); })
})

body{ padding: 0px; background: #DDD; margin: 0px;}
.cname{ color:#FFF; text-align:center}

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="//golden-layout.com/files/latest/js/goldenlayout.min.js"></script>
<link type="text/css" rel="stylesheet" href="//golden-layout.com/files/latest/css/goldenlayout-base.css" />
<link type="text/css" rel="stylesheet" href="//golden-layout.com/files/latest/css/goldenlayout-dark-theme.css" />

<div id="ss" style="width: 800px; height:30px; margin:5px auto"> <button id="add"> Add </button> </div>   
<div id="golden" style="width: 800px; height:280px; margin:0px auto"> </div> 

我可以通过单击“添加”按钮添加新行。 一旦我关闭所有新添加的行，并再次尝试使用添加按钮，它会将模式更改为嵌套列，我希望将其作为行 谢谢

 var newItemConfig = {
        type: 'component',
        componentName: 'parrent',
        width: 38.197,
    };
 layout.root.contentItems[0].addChild(newItemConfig);

我正在使用此方法添加新项目

Answer 1

https://github.com/deepstreamIO/golden-layout/blob/master/src/js/items/RowOrColumn.js#L134

发生这种情况的原因是，当从 ContentItem 中删除子项时，仅留下 1 个子项，库就会清理这些内容。所以它所做的就是说，嘿，我是唯一剩下的人了，所以我的 ContentItem 不再需要了。它在其父级上调用名为 replaceChild 的方法。这将获取唯一剩余的子项，使其成为其父项的子项，并在清理过程中删除 ContentItem。

现在为什么一旦发生这种情况它就会继续向右添加？这是因为父级是根，它始终是一个堆栈。因此，当它替换时，它会作为堆栈替换。这可以通过在添加新项目之前添加以下日志语句来证明。

console.log(layout.root.contentItems[0].type)

这将证明一旦发生这种情况，它们就是堆栈的一部分而不是列。这种行为是为了清理问题而预期的。

令人意想不到的是，这种行为是有条件的。如果最后一项 isClosable = false 则不会执行此操作。

您的配置将其视为错误。但是，如果您在添加新日志语句之前放置以下日志语句:

console.log(layout.root.contentItems[0].config.isClosable)

当您期望输出为 false 时，输出为 true，从而满足替换它的条件。

所以这告诉我由于某种原因它没有被正确初始化。您可以看到没有关闭图标，但这仅在初始化时发生。因此，在配置被设置为 true 之后的某个时刻。