0

请看问题：

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);

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

4

2 回答 2

4

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)

输出是true您期望它false满足替换它的条件的时间。

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

于 2017-12-17T17:45:23.877 回答
0

在添加新组件之前检查组件是否已经存在

checkIfCOmponentExist(name: string): boolean {
   let compName = this.layout.root.getComponentsByName(name);
    if (compName && compName.length != 0)
       return true;
    else
       return false;

}

于 2019-09-13T05:21:49.123 回答