Aem 多字段组件问题

我正在创建一个具有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）上下箭头不再工作。我们非常感谢您提出的任何解决这些问题的建议。非常感谢。

multifield xtype的字段配置只需要一项（即，您可以在其中包含一个textfield。当配置多个值时，它们将存储为多值属性（称为链接），当仅配置一个值时，将存储为单值属性（称为链接）。在多字段中配置的所有数据将作为链接属性存储在节点中。您将无法将它们作为“jcr:title”和“jcr:url”获取

您应该创建一个自定义的xtype，比如“linksXtype”，它将“jcr:title”和“jcr:url”存储为一个字符串，由一些模式分隔，比如“***”（“jcr:title***jcr:url”）

您可以在此处找到创建自定义xtype的详细信息：

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 services提供了一个更优雅的多字段面板小部件来处理此用例。它简化了该方法，并且无需为所需字段的每个组合编写自定义xtype。数据以JSON格式存储，并随TagLib一起从节点提取数据。链接：

如前所述，您需要定义自己的自定义XType，而不是将多个字段放在多字段中

作为连接

字符串[]

属性中字段的替代方法，另一种方法是为添加的每个字段创建子节点，例如，而不是：

<links
    link="[Example|http://example.com,Google|http://google.com]"/>

---

它还允许您将更复杂的X类型作为子类型使用，例如图像，而无需进行任何进一步的工作。

我知道问题在我发表评论时已得到解决，但这仅供参考。 1） 当对话框加载时，它总是空的，当我重新打开对话框时，它不会显示保存的内容

答：我使用extjs为对话框创建多字段，在我的extjs set（）函数代码中

设置值：函数（值）{

但代码应该是

设置值：函数（值）{

只要更正此错误，您的对话框将显示填充的值。同时检查对话框中的name属性。它应该是正确的

2） 上下箭头不再工作。
这个问题主要与你的js文件有关。我所经历的。每当点击不起作用时，检查浏览器中开发者工具中的js错误。如果出现一个语法错误，你的js也会停止工作并点击

---

希望这对某人有所帮助：）

谢谢。我只是想澄清一下，我能够以“jcr:title”和“jcr:url”的形式读取我的数据。请查看此处的链接。我遇到的问题是，当我尝试编辑时，textfield组件无法读取这些值并在对话框中填充。连接这些值的唯一缺点是，您可能会遇到一些问题，例如，如果您的网站结构将

es

作为

en

，通常pathfields会在卷展栏上自动更新此路径，但我认为它在连接字段时有问题，因为它将整个组合视为一个直接的文本字段。@jpr值可能会被存储，但我认为它不会按您希望的方式工作。如果您签出多字段的代码，它会添加s字段配置节点上提到的xtype项。因此，当您打开对话框时，将迭代并为多字段中的每个项设置使用您在多字段中提供的名称存储的属性。使用当前设置，值不会以多字段代码预期的形式存储。您将不得不创建自定义xtype。是否子节点的值也会按照对话框的工作方式自动读取？或者我们必须显式读取它们并在加载时填充对话框。@Sharathmadapa是的，当对话框打开时，它们会正常读取，无需任何额外工作。您是如何应用的？我无法使其工作。我需要在页面属性中使用此选项erties，但也在一个普通组件的对话框中进行了测试，但运气不佳。我甚至看不到+符号来向自定义xtype添加更多字段。可能缺少一些内容？@Phoenix_uy在没有看到一些代码的情况下很难调试您的问题…可能会对您的对话示例提出一个新问题？上面的代码看起来与multicomposite addon d非常相似由Citytechnic开发：。不确定原始版本是什么，但github上的代码正在定期更新。

<links>
    <link_1
        title="Example"
        url="http://example.com"/>
    <link_2
        title="Google"
        url="http://google.com"/>
<links>

<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>

    var link = JSON.parse(value);
    this.websiteName.setValue(link.text);
    this.websiteLinks.setValue(link.text);
    this.hiddenField.setValue(value);
},

    var link = JSON.parse(value);
    this.websiteName.setValue(link.field1Name);
    this.websiteLinks.setValue(link.field2Name);
    this.hiddenField.setValue(value);
},