在Not Only an ECM Place的cool 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对象探索的大词......
1条答案
按热度按时间j2cgzkjk1#
经过一系列的find,grep,less(我强烈建议安装Cygwin来进行这种调查,它真的很有帮助).我发现一些标准的编辑器设置小部件依赖于**
TextBoxEditorSettings
来更新它们的宽度.这个小部件可以在这里找到:pvd/widget/editors/settings/TextBoxEditorSetting.js
例如TextBox就是其中之一,
TextBoxEditorSettings
和TextBox
**编辑器的关联可以在pvd/widget/registry/BasicHelperConfiguration.js
中找到:**
TextBoxEditorSettings
管理嵌入在PropertyTable
**中的编辑器的情况。我没有从头开始配置宽度配置编辑,而是尝试重用和扩展它。如果我们需要添加其他设置(文本等),我们不应该将它们直接附加到**
TextBoxEditorSettings
,否则所有配置了它的编辑器也会得到这些设置,特别是TextBox
,这不是我们想要的。相反,我们将使用一个浅拷贝**,调用slice()
。然后编写你的模板,使它尽可能容易地调整大小。我设计它使编辑器可以从顶部节点调整大小。我命名顶部节点的连接点为
oneuiBaseNode
,所以不需要覆盖adjustWidth()
和resetWidth()
。