Question

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

这里是相关文件：

插件javascript文件，该文件将注册插件（在ICN的全局ControlRegistry对象中）
自定义编辑器javascript文件将扩展自定义小部件和将小部件映射到属性的_EditorMixin类
带有dojo HTML模板的自定义Widget 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();
}

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

Answer 1

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

经过一番查找后，grep减少了（我强烈建议安装Cygwin进行这种调查，这确实有帮助）。我发现某些标准的“编辑器设置”窗口小部件依靠 TextBoxEditorSettings 使其宽度可更新。可以在以下位置找到此小部件：pvd/widget/editors/settings/TextBoxEditorSetting.js

例如，

文本框就是其中之一。 TextBoxEditorSettings 和 TextBox 编辑器之间的关联可以在pvd/widget/registry/BasicHelperConfiguration.js中找到：

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

TextBoxEditorSettings 管理嵌入在 PropertyTable 中的Editor的情况。我没有从头开始配置宽度配置编辑，而是尝试重用和扩展它。

如果我们需要添加其他设置（文本等）。我们不应该将它们直接附加到 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-无法更新自定义编辑器的宽度

1 个答案: