0

遵循Not Only an ECM Place这个很酷的教程，我的目标是编写一个自定义编辑器，其中包含几个元素和一个与属性关联的字段。此自定义编辑器将通过 ICN 插件安装。由于该属性是多值的，因此编辑器将嵌入到编辑器中。PropertyTable

这里的相关文件是：

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

下面尝试使编辑器宽度可调整大小。在 Editor 注册代码中，我使用了 aDimensionSetting并尝试覆盖 onSettingChanged() 以使 Editor Widget 可调整大小：

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

它没有用。红皮书对自定义 Widget 的讨论并不多，所以 - 除了我之前提到的教程之外，很难找到信息，除非通过“逆向工程”，这是 Javascript 对象探索的一个大词......

4

1 回答 1

1

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

经过一堆 find, grep, less （我强烈建议安装 Cygwin 进行这种调查，它真的很有帮助）。我发现一些标准的编辑器设置小部件依赖于TextBoxEditorSettings使其宽度可更新。这个小部件可以在这里找到：pvd/widget/editors/settings/TextBoxEditorSetting.js

例如，TextBox 就是其中之一。TextBoxEditorSettings和editor之间的关联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>
于 2018-11-30T11:47:50.013 回答