如何在ICN分屏模式下修改contentViewer的标签页标题？

背景回顾 #

你已经搞定了单标签和后续新增主标签的标题修改，但分屏（垂直/水平）场景下的标签标题还没实现对吧？我之前做ICN定制开发时也碰到过一模一样的问题，分享下亲测有效的解决方案。

分屏标签的核心思路 #

ICN的分屏功能是基于SplitContainer组件实现的，用户触发分屏操作时，会调用内部的createSplitContainer方法生成分屏容器。我们只需要挂钩这个方法，再复用你已经写好的标题修改逻辑，就能覆盖分屏场景。

完整实现代码 #

var kill = aspect.after(ecm.model.desktop, 'onChange', function() {
    var contentViewer = dijit.byId('contentViewer');
    if (!contentViewer) return;

    kill.remove();
    var viewerTabTitleDef = new ViewerTabTitleDef();

    // 处理初始主标签和后续新增的主标签
    contentViewer.mainTabContainer.getChildren().forEach(function(child) {
        viewerTabTitleDef.changeTitle(viewerTabTitleDef.self, child.controlButton, child.contentViewerPane.viewerItem.item);
    });
    aspect.after(contentViewer.mainTabContainer, 'addChild', function(child) {
        viewerTabTitleDef.changeTitle(viewerTabTitleDef, child.controlButton, child.contentViewerPane.viewerItem.item);
    }, true);

    // 处理分屏场景
    var splitHandle = aspect.after(contentViewer, 'createSplitContainer', function(splitContainer) {
        // 更新分屏后已存在的标签标题
        splitContainer.getChildren().forEach(function(pane) {
            if (pane.controlButton && pane.contentViewerPane?.viewerItem?.item) {
                viewerTabTitleDef.changeTitle(viewerTabTitleDef.self, pane.controlButton, pane.contentViewerPane.viewerItem.item);
            }
        });

        // 监听分屏容器中新增的标签
        aspect.after(splitContainer, 'addChild', function(pane) {
            if (pane.controlButton && pane.contentViewerPane?.viewerItem?.item) {
                viewerTabTitleDef.changeTitle(viewerTabTitleDef, pane.controlButton, pane.contentViewerPane.viewerItem.item);
            }
        }, true);
    }, true);

    // 清理钩子，避免内存泄漏
    aspect.before(contentViewer, 'destroySplitContainer', function() {
        splitHandle.remove();
    });
});

关键细节说明 #

• createSplitContainer钩子：这是ICN触发分屏时的核心方法，每次用户点击垂直/水平分屏按钮都会调用，挂钩它就能精准捕获分屏事件。
• 分屏面板结构：分屏后的每个面板和主标签容器里的子元素结构完全一致，都是ContentViewerPane实例，所以直接复用你已有的changeTitle方法就行。
• 内存泄漏预防：在分屏容器被销毁时移除对应的事件钩子，避免长时间运行后占用过多内存。

测试验证步骤 #

1. 打开单个文档，确认主标签标题正常修改；
2. 点击分屏按钮，检查分屏后的标签标题是否同步更新；
3. 在分屏面板中打开新文档，验证新标签的标题也能正确读取属性值。

内容的提问来源于stack exchange，提问作者paulsm4