Javascript ICN 3.0.x-无法更新自定义编辑器的宽度

接下来，我打算编写一个自定义编辑器，其中包含多个元素和一个与属性关联的字段。此自定义编辑器将通过ICN插件安装。由于属性是多值的，因此编辑器将嵌入到属性表中

有关档案如下：

• 将注册插件的插件javascript文件（在ICN的全局

  ControlRegistry

  对象中）
• 自定义编辑器javascript文件将扩展自定义小部件和将小部件映射到属性的

  \u EditorMixin

  类
• 带有dojo HTML模板的自定义小部件Javascript文件

下面是使编辑器宽度可调整的尝试。在编辑器注册代码中，我使用了

维度设置

，并尝试覆盖onSettingChanged（），以使编辑器小部件的大小可调整：

require([ /* [...] */],
        function(lang, ) {
            var editorId = "theWannaBeResizeableEditor";
            ControlRegistry.editors.editorConfigs[editorId] = {
                label: "A dummy label",
                editorClass: AWannaBeResizeableEditor,
                settings:
                [
                    {
                        name: "width",
                        controlClass: DimensionSetting,
                        controlParams: {
                            label: resources.styleSettingsLabel.width,
                            help: resources.styleSettingsHelp.width
                        },
                        defaultValue: "100%",
                        // And here begins the problem...
                        onSettingChanged: function(helper, width) {
                            // Tried to resize the Widget : FAIL
                        }
                    } // [...]
                ]
            }
        });

除其他外，我尝试了以下实现：

onSettingChanged: function(helper, width) {
  helper.updateSetting("width", width);
  helper.widget._adjustSizing && helper.widget._adjustSizing();
  helper.widget.view.resize();
}

它不起作用。红皮书对自定义小部件不太热衷，所以-除了我前面提到的教程之外，很难找到信息，除了“反向工程”，这是Javascript对象探索的一个大字…

免责声明：我在另一个地方写了一个类似的答案

经过一系列的查找，grep，less（我强烈建议为这种调查安装Cygwin，它真的很有帮助）。我发现一些标准编辑器设置小部件依赖于

TextBoxEditorSettings

使其宽度可更新。这个小部件可以在这里找到：

pvd/widget/editors/settings/TextBoxEditorSetting.js

例如，TextBox就是其中之一。

TextBoxEditorSettings

和

TextBox

编辑器之间的关联可以在

pvd/widget/registry/BasicHelperConfiguration.js

中找到：

define(
    [/* [...] */],
    function (declare,
          /* [...] */,
          textBoxEditorSettings,
          /* [...] */) {
        return {
            editors: {
                editorConfigs: {
                    // [...]
                    "textBox": {
                        settings: textBoxEditorSettings
                    } // [...]
                }
            }
        }
     }
);

TextBoxEditorSettings

管理嵌入

属性表中的编辑器的案例。我没有从头开始配置宽度配置编辑，而是尝试重用和扩展它

如果我们需要添加其他设置（文本等）。我们不应该将它们直接附加到
文本框编辑器设置中，否则所有配置了它的编辑器也会得到这些设置，特别是
文本框
，这不是我们想要的。相反，我们将使用浅拷贝，调用
slice（）

然后编写模板，使其尽可能容易调整大小。我设计它是为了使编辑器可以从顶部节点调整大小。我将顶部节点的连接点命名为
oneuiBaseNode
，因此无需过度使用
adjustWidth（）
。和
resetWidth（）



require(
    [
        "dojo/_base/lang",
        "ecm/model/configuration/ControlRegistry",
        // [...] Include below all the settings editor you need
        "pvd/widget/editors/settings/TextBoxEditorSettings",
        // Below your custom template
        "AWannaBeResizeableEditorPluginDojo/editors/AWannaBeResizeableEditor",
        // Below for translation support of TextBoxEditorSettings
        "dojo/i18n!pvd/nls/common"
    ],
    function(lang, ControlRegistry, TextBoxSetting,
             TextBoxEditorSettings, AWannaBeResizeableEditor,
             resources) {
        var editorId = "aWannaBeResizeableEditor";

        // Perform a shallow copy to avoid conflicts
        var editorSettings = TextBoxEditorSettings.slice();

        // Additional setting editors
        // Repeat this block for all further setting editor needed
        /// 1. Definition
        var anotherSettingEditor = {
            // [...]
        };
        /// 2. Insertion
        editorSettings.unshift(anotherSettingEditor);
        /// End of this block

        // Registration in the editor configurations...
        ControlRegistry.editors.editorConfigs[editorId] = {
            label: "A Wannabe Resizable Editor",
            editorClass: AWannaBeResizeableEditor,
            settings: editorSettings
        }

        // Registring the widget in the right mapping type
        // [...]
    }
);

<div class="searchBoxFillerWidget"
     data-dojo-attach-point="oneuiBaseNode">
    <!--
         Write here HTML code relatively resizeable
         to the top node.
    -->
</div>