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

Question

在此 cool tutorial of Not Only an ECM Place 之后，我打算编写一个自定义编辑器，其中包含多个元素和一个与属性关联的字段。此自定义编辑器将通过 ICN 插件安装。由于属性是多值的，编辑器将嵌入到 PropertyTable 编辑器中。

这里的相关文件是：

将注册插件的插件 javascript 文件（在 ICN 的全局 ControlRegistry 对象中）
自定义编辑器 javascript 文件将扩展自定义 Widget 和 _EditorMixin class 将 Widget 映射到属性
带有 dojo HTML 模板的自定义小部件 Javascript 文件

下面是使编辑器宽度可调整大小的尝试。在编辑器注册代码中，我使用了 DimensionSetting 并尝试覆盖 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();
}

没用。 Redbooks 对自定义 Widgets 的讨论并不多，所以 - 除了我之前提到的教程，很难找到信息，除了 "reverse engineering"，Javascript objects exploration 的大词...

Answer 1

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

经过大量查找、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 管理嵌入在 PropertyTable 中的编辑器的情况。我没有从头开始配置宽度配置编辑，而是尝试重用和扩展它。

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

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
        // [...]
    }
);

然后编写您的模板，使其尽可能易于调整大小。我设计它是为了让编辑器可以从顶部节点调整大小。我将顶部节点的附加点命名为 oneuiBaseNode，因此无需覆盖 adjustWidth()。和 resetWidth().

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

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

ICN 3.0.x - Cannot update the width of a Custom editor

javascript

dojo

plugins

filenet-p8

ibm-content-navigator