CQ5嵌套多字段,带有选择选项

时间:2016-01-22 09:11:58

标签: javascript json cq5 aem

我需要将编辑器在textfield中从对话框面板中写入的值添加到<select>选项中。我已经为对话框组件创建了多字段选项,但不确定如何在<select>自己获取值。

我正在使用JS小部件进行多字段,你可以找到它here。我知道多字段JS应该返回一个JSON数组选项,我该如何实现这个呢?

这是我的XML标记:

<developer
    jcr:primaryType="cq:Widget"
    title="Data"
    xtype="panel">
    <items jcr:primaryType="cq:WidgetCollection">
        <developer
            jcr:primaryType="cq:Widget"
            fieldDescription="Click the '+' to add a new data"
            fieldLabel="Dev Data"
            name="./devdata"
            xtype="multifield">
            <fieldConfig
                jcr:primaryType="cq:Widget"
                xtype="devprofile"/>
        </developer>
    </items>
</developer>

为多字段添加文本字段的JavaScript

this.developerName = new CQ.Ext.form.TextField({
    fieldLabel : "Developer's Name",
    allowBlank: true,
    width : 400,
    listeners : {
        change : {
            scope : this,
            fn : this.updateHidden
        },
        dialogclose : {
            scope : this,
            fn : this.updateHidden
        }
    }
});
this.add(this.developerName);

标记:

<c:if test="${not(empty(developerName))}">
    <select id="use-names" class="js-example-basic-multiple">
        <option>Example</option>
        <option>${developerName}</option>
    </select>
</c:if>

如果您需要更详细的分享,请与我们联系。

1 个答案:

答案 0 :(得分:1)

ACS commons有很好的自定义多字段工作示例。看看https://adobe-consulting-services.github.io/acs-aem-commons/features/widgets.html

只需用您的下拉菜单替换textarea,您就可以得到所需的东西..