ICN 3.0.x - Невозможно обновить ширину пользовательского редактора. - PullRequest
Новая
       70

ICN 3.0.x - Невозможно обновить ширину пользовательского редактора.

0 голосов
/ 30 ноября 2018

Следуя этому классному учебнику из Не только в ECM Place , я намеревался написать собственный редактор, содержащий несколько элементов и поле, связанное со свойством.Этот пользовательский редактор будет установлен через плагин ICN.Поскольку свойство является многозначным, редактор будет встроен в PropertyTable редактор.

Соответствующие файлы:

  • Файл JavaScript подключаемого модулякоторый зарегистрирует плагин (в глобальном ControlRegistry объекте ICN)
  • Пользовательский файл JavaScript редактора, который расширит как пользовательский виджет, так и класс _EditorMixin, который отображает виджет на свойство
  • Пользовательский Javascript-файл виджета с HTML-шаблоном Dojo

Ниже приведена попытка изменить размер редактора по ширине.В регистрационном коде редактора я использовал 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 ...

1 Ответ

0 голосов
/ 30 ноября 2018

Отказ от ответственности: я написал аналогичный ответ в другом месте.

После кучки находок, 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>
...