多字段组件问题
我正在创建一个有2个文本字段的多字段组件。下面是我的对话框xml。
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:primaryType="cq:Dialog"
title="dialog"
xtype="dialog">
<items jcr:primaryType="cq:WidgetCollection">
<links
jcr:primaryType="cq:Widget"
fieldLabel="QuickLinks"
name="./links"
xtype="multifield">
<fieldConfig
jcr:primaryType="cq:Widget"
xtype="multifield">
<items jcr:primaryType="cq:WidgetCollection">
<title
jcr:primaryType="cq:Widget"
fieldLabel="Title"
hideLabel="{Boolean}false"
name="./jcr:title"
xtype="textfield"/>
<url
jcr:primaryType="cq:Widget"
fieldLabel="URL"
name="./jcr:url"
xtype="textfield"/>
</items>
</fieldConfig>
</links>
</items>
</jcr:root>我可以编辑内容，然后保存内容。然而，我有两个问题- 1)当对话框加载时，它总是空的，当我重新打开对话框时，它不显示保存的内容2)向上和向下箭头不再起作用。任何解决这些问题的建议都是非常感谢的。非常感谢。
回答 3
Stack Overflow用户
发布于 2014-10-10 15:33:41
multifield xtype的字段配置只接受一项(即你可以在其中有一个文本字段)。当配置了多个值时，它们将被存储为称为链接的多值属性，而当只配置了一个值时，将被存储为称为链接的单值属性。在多字段中配置的整个数据将作为links属性存储在节点中。您将无法将它们作为"jcr:title“和"jcr:url”获取。
您应该创建一个自定义xtype，名为"linksXtype“，它将"jcr:title”和"jcr:url“存储为由模式”*“分隔的单个字符串(”jcr:title*jcr:url“)。
您可以在此处找到创建自定义xtype的详细信息：link
xtype可以像这样创建：
Ejst.CustomWidget = CQ.Ext.extend(CQ.form.CompositeField, {
/**
* @private
* @type CQ.Ext.form.TextField
*/
hiddenField: null,
/**
* @private
* @type CQ.Ext.form.ComboBox
*/
jcrtitle: null,
/**
* @private
* @type CQ.Ext.form.TextField
*/
jcrurl: null,
constructor: function(config) {
config = config || { };
var defaults = {
"border": false,
"layout": "table",
"columns":2
};
config = CQ.Util.applyDefaults(config, defaults);
Ejst.CustomWidget.superclass.constructor.call(this, config);
},
// overriding CQ.Ext.Component#initComponent
initComponent: function() {
Ejst.CustomWidget.superclass.initComponent.call(this);
this.hiddenField = new CQ.Ext.form.Hidden({
name: this.name
});
this.add(this.hiddenField);
this.jcrtitle = new CQ.Ext.form.TextField({
fieldLabel:"Jcr url",
cls:"ejst-customwidget-1",
listeners: {
change: {
scope:this,
fn:this.updateHidden
}
},
optionsProvider: this.optionsProvider
});
this.add(this.jcrtitle);
this.jcrurl = new CQ.Ext.form.TextField({
fieldLabel:"Jcr Title",
cls:"ejst-customwidget-2",
listeners: {
change: {
scope:this,
fn:this.updateHidden
}
}
});
this.add(this.jcrurl);
},
// overriding CQ.form.CompositeField#setValue
setValue: function(value) {
var parts = value.split("/");
this.jcrtitle.setValue(parts[0]);
this.jcrurl.setValue(parts[1]);
this.hiddenField.setValue(value);
},
// overriding CQ.form.CompositeField#getValue
getValue: function() {
return this.getRawValue();
},
// overriding CQ.form.CompositeField#getRawValue
getRawValue: function() {
return this.jcrtitle.getValue() + "***" +
this.jcrurl.getValue();
},
// private
updateHidden: function() {
this.hiddenField.setValue(this.getValue());
}
});
// register xtype
CQ.Ext.reg('linksXtype', Ejst.CustomWidget);将dialog.xml更改为如下所示
<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0"
jcr:primaryType="cq:Dialog"
title="dialog"
xtype="dialog">
<items jcr:primaryType="cq:WidgetCollection">
<links
jcr:primaryType="cq:Widget"
fieldLabel="QuickLinks"
name="./links"
xtype="multifield">
<fieldConfig
jcr:primaryType="cq:Widget"
xtype="linksXtype">
</fieldConfig>
</links>
</items>
</jcr:root>要获取这些值，请迭代存储为links属性的字符串数组，并将每个字符串拆分为“*”
编辑：
其ACS-Commons包下的Adobe consultancy提供了一个更优雅的multifieldpanel小部件来处理此用例。它简化了方法并消除了为每个必填字段组合编写自定义xtype的需要。数据以JSON格式存储，并附带标记库，用于从节点提取数据。链接：http://adobe-consulting-services.github.io/acs-aem-commons/features/widgets.html#multi-field-panel-since-150
Stack Overflow用户
发布于 2014-10-10 16:41:13
正如Sharath所说，您需要定义自己的自定义XType，而不是将多个字段放入多字段本身。
作为在String[]属性中连接字段的替代方法，另一种方法是为添加的每个字段创建子节点，例如：
<links
link="[Example|http://example.com,Google|http://google.com]"/>你最终会得到：
<links>
<link_1
title="Example"
url="http://example.com"/>
<link_2
title="Google"
url="http://google.com"/>
<links>您可以读回这些值，而不需要从字符串值中解析它们。这也意味着像rollout这样的更新路径字段应该作为标准工作。
代码太长了，不能在这里完整地生成，但在上有一个很好的起点。(它有一个Adobe版权声明，但由用户发布-不确定它的官方状态，但作为参考实现很好；编辑：ery发现的可能与Citytechnic MultiCompositeField on Github有关的)。
上面的示例也采用了与多字段本身相同的方法-即，它从组合的fieldConfig节点读取-为它创建的子节点上的每个条目创建一个属性。
这使得复合字段完全可重用，因为无论您想要创建多少变体，您只需要一个复合XType，也就是说，它将允许您采用问题中概述的方法：
<links
jcr:primaryType="cq:Widget"
fieldLabel="QuickLinks"
name="./links"
xtype="mtmulticompositefield">
<fieldConfigs jcr:primaryType="cq:WidgetCollection">
<title
jcr:primaryType="cq:Widget"
fieldLabel="Title"
hideLabel="{Boolean}false"
name="./jcr:title"
xtype="textfield"/>
<url
jcr:primaryType="cq:Widget"
fieldLabel="URL"
name="./jcr:url"
xtype="textfield"/>
</fieldConfigs>
</links>它还允许您使用更复杂的XTypes作为孩子，例如图像，而不需要任何进一步的工作。
Stack Overflow用户
发布于 2015-12-08 05:05:21
我知道这个时候问题已经解决了，但这只是一个参考。1)当对话框加载时，它总是空的，当我重新打开对话框时，它不显示保存的内容
答:我使用extjs为我的对话框创建多字段，在我的extjs set()函数中，代码如下所示
setValue:函数(值){
var link = JSON.parse(value);
this.websiteName.setValue(link.text);
this.websiteLinks.setValue(link.text);
this.hiddenField.setValue(value);
},但是代码应该是
setValue:函数(值){
var link = JSON.parse(value);
this.websiteName.setValue(link.field1Name);
this.websiteLinks.setValue(link.field2Name);
this.hiddenField.setValue(value);
},只要纠正这个问题，你的对话框就会显示填充的值。还要在对话框中检查您的name属性。它应该是正确的。
2)向上和向下箭头不再起作用。
这个问题主要与您的js文件有关。我所经历的。当点击不起作用时，在浏览器的开发者工具中检查你的js中的错误。如果只有一个语法错误，你的js就会停止工作，然后也会点击。
希望这对某些人有帮助:)
https://stackoverflow.com/questions/26290908
复制相似问题
腾讯云开发者
