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

fiei3ece  于 2022-12-16  发布在  Dojo
关注(0)|答案(1)|浏览(139)

Not Only an ECM Placecool tutorial之后,我的目标是编写一个自定义编辑器,它包含几个元素和一个与属性关联的字段。这个自定义编辑器将通过ICN插件安装。由于属性是多值的,因此编辑器将嵌入到**PropertyTable**编辑器中。
相关文件如下:

  • 将注册插件的插件JavaScript文件(在ICN的全局ControlRegistry对象中)
  • 自定义编辑器JavaScript文件,它将扩展自定义小部件和_EditorMixin类,后者将小部件Map到属性
  • 带有dojoHTML模板的自定义小部件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();
}

红皮书对自定义小部件不太热衷,所以--除了我之前提到的教程,很难找到信息,除非通过“逆向工程”,一个JavaScript对象探索的大词......

j2cgzkjk

j2cgzkjk1#

  • 免责声明:我在另一个地方也写过类似的回答。

经过一系列的find,grep,less(我强烈建议安装Cygwin来进行这种调查,它真的很有帮助).我发现一些标准的编辑器设置小部件依赖于**TextBoxEditorSettings来更新它们的宽度.这个小部件可以在这里找到:pvd/widget/editors/settings/TextBoxEditorSetting.js
例如TextBox就是其中之一,
TextBoxEditorSettingsTextBox**编辑器的关联可以在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>

相关问题