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

Question

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

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

• Файл плагина, который будет регистрировать плагин (в глобальном ControlRegistry объект ICN)
• Пользовательский файл JavaScript редактора, который будет расширять как пользовательский виджет, так и _EditorMixin класс, который отображает виджет в собственность
• Пользовательский Javascript-файл Widget с 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...

Answer 1

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

После множества поиска, grep, less (я настоятельно советую установить 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 и расширить его.

Если нам нужно добавить другие настройки (текст и т. Д.). мы не должны добавлять их непосредственно к 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>