如何在CQ5中添加带有页面列表的下拉列表？

Question

我有以下代码库与大家共享，以列出通过AJAX调用使用查询生成器获取的页面。我们必须传递URL和参数，以从提供的URL中获取子页面。

我放置了一些console.log来跟踪每个状态的值。用您的项目替换。

<featurearticles
    jcr:primaryType="cq:Widget"
    fieldLabel="Article Pages"
    itemId="selectauthorId"
    name="./authorselect"
    type="select"
    xtype="selection">
    <options jcr:primaryType="cq:WidgetCollection"/>
    <listeners
        jcr:primaryType="nt:unstructured"
        loadcontent="function(box,value) { 
        CQ.Ext.Ajax.request({ 
            url: '/bin/querybuilder.json', 
            success: function(response, opts) { 
                console.log('Response from the ajax'); 
                var resTexts = $.parseJSON(response.responseText); 
                var selectopts = []; 
                console.log(resTexts); 
                $.each(resTexts.hits, function(key, page) { 
                    console.log(page); 
                    selectopts.push({value: page['path'], text:page['name']}); 
                }); 
                console.log(selectopts); 
                box.setOptions(selectopts); 
            },  
            params: {
            'type' :'cq:Page', 
            'group.1_path' : '/content/<PROJECT_NAME>/Feature_Articles' 
            } 
        }); 
       }"
       selectionchanged="function(box,value) { 
        var panel = this.findParentByType('panel');
        var articleTitle = panel.getComponent('articleTitleId');

        CQ.Ext.Ajax.request({ 
            url: value + '/_jcr_content/par/featurearticleintro.json',
            success: function(response, opts) {
                console.log('success now');
                var resTexts = $.parseJSON(response.responseText); 
                console.log(resTexts);
            },
            failure: function(response, opts) {                    
                console.log('server-side failure with status code ' + response.status);
            }
        });            
    }"/>
</featurearticles>

如果您有比这更好的主意，我想知道。

干杯，

Answer 1

[另一种选择是使用选择xtype的“ options”属性通过servlet或吊索选择器从AJAX调用中获取下拉列表选项。小部件api（http://dev.day.com/docs/en/cq/5-6/widgets-api/index.html-搜索“选择”）对此表示为options属性：

[如果options是字符串，则假定它是指向JSON的URL返回选项的资源（与上述结构相同）。这应该是绝对网址，也可以使用使用占位符编辑的内容资源（Selection.PATH_PLACEHOLDER =“ $ PATH”），例如：$ PATH.options.json。

因此，构建一个将以JSON响应AJAX请求的servlet，然后将该servlet置于“ options”属性中可能是一种更干净的方法。例如，属性可以是options="/libs/myServlet"之类的东西，也可以是options="$PATH.options.json"之类的东西。这可能使对话框更整洁（不需要侦听器），并且它使用内置的CQ功能通过AJAX来获取选项。

Answer 2

我们可以使用如下所示的动态下拉菜单：

<item
    jcr:primaryType="cq:Widget"
    fieldLabel="Item"
    name="./item"
    optionsRoot="root"
    options="/bin/service/item.json"
    type="select"
    xtype="selection"/>

选项：URL将返回所选xtype的json格式

optionsRoot：json的根项目的名称

optionsTextField：文本字段的名称（默认值：“文本”）

optionsValueField：值字段的名称（默认值：“ value”）

json的示例：{“ root”：[{“ text”：“ Item 1”，“ value”：“ Value 1”}}，{“ text”：“ Item 2”，“ value”：“ Value 2” }，{“文本”：“项目3”，“值”：“值3”}]}

Selection xtype