在Adobe cq5对话框中的更改路径字段上填充选择框选项 [英] Populating select-box options on changing pathfield in dialog of Adobe cq5

问题描述

在我的一个对话框中，我有一个xtype为 pathfield的字段。根据此字段的值，我想更改选择框（xtype = selection，type = select）的选项。

In one of my dialogs, I have a field with an xtype of "pathfield". Depending on the value of this field, I want to change the options of the "select-box" (xtype="selection",type="select").

我使用了侦听器，并在 pathfield字段的事件 change和 dialogclose上添加了一个函数。

I have used listeners and added a function on events "change" and "dialogclose" for "pathfield" field.

我可以调用servlet，并且它正在发送带有选项的JSON响应，但是，我无法用这些选项填充选择框。

I can call the servlet and it is sending the JSON response with options, however, I am unable to populate the select-box with these options.

以下是dialog.xml

The following is code of the dialog.xml

<select-product jcr:primaryType="cq:Widget"
                fieldDescription="Select Product (Product Details Page)"
                fieldLabel="Select Product" 
                height="{Long}40" key="productPath"
                name="./productPath" 
                style="height:21px" 
                width="{Long}350"
                rootPath="/content/MY_MSM_PATH" 
                xtype="pathfield">

    <listeners jcr:primaryType="nt:unstructured"
        change="function(){ var selectBox=$('select[name=features]');
        $.getJSON('/bin/featuresservlet?path=' + this.value, 
            function(jsonData){
                $.each(jsonData, function(i,data){
                    $('<option>').val(data.value).text(data.name).appendTo('select[name=features]');
                });
        }); }"

        dialogclose="function(){ 
            var selectBox=$('select[name=features]');
            $.getJSON('/bin/featuresservlet?path=' + this.value, function(jsonData){
                $.each(jsonData, function(i,data){
                    $('<option>').val(data.value).text(data.name).appendTo('select[name=features]');
                });
            }); }" />

</select-product> 

<features jcr:primaryType="cq:Widget" 
          fieldLabel="Select Features:"
          key="features" 
          name="./features" 
          type="select" 
          xtype="selection" />

推荐答案

您可以使用选择xtype的set options方法。将您的侦听器修改为类似

you can use the set options method of the selection xtype. Modify your listener to something like this

dialogclose="function(pathfield){ 
        var dialog = pathfield.findParentByType('dialog');
        var selectBox = dialog.findByType('selection')[0]; //assuming this is the only selection you have
        $.getJSON('/bin/featuresservlet?path=' + this.value, function(jsonData){
            selectBox.setOptions(jsonData);
            selectBox.doLayout(flase,false);
        }); }" 

您的servlet返回的数据必须采用以下格式：

The data returned by your servlet must be of the following format :

[
 {
    "value": "valueOfOption1",
    "text": "textOfOption1"
 },
 {
    "value": "valueOfOption2",
    "text": "textOfOption2"
 }

]

参考： http://dev.day.com/docs/en/cq/5-6/widgets-api /index.html?class=CQ.form.Selection

这篇关于在Adobe cq5对话框中的更改路径字段上填充选择框选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！