javascript - 如何在 CQ 对话框中延迟加载标签

Question

如果页面分配了很多标签，则加载对话框可能需要相当长的时间(最多 20 秒)。如果作者只想更改多个页面上的某些其他属性，这可能会变得相当烦人。因此问题是，有没有办法在对话框中延迟加载标签？

更准确地说，我说的是基于 ExtJS 的“经典 UI”。

Answer 1

实际上有两种方法可以实现这一点，都使用按钮来触发加载:

打开子对话框:

<button
    jcr:primaryType="cq:Widget"
    text="Open Tags Dialog"
    handler="function(button) {
        var parent = button.findParentByType('dialog');
        var dialog = CQ.WCM.getDialog(PATH_TO_DIALOG + '.infinity.json');
        dialog.setFormUrl(parent.form.url);
        dialog.loadContent(parent.form.url);
        dialog.show();
    }"
    xtype="button"/>

说明:单击时会触发处理程序。它加载子对​​话框，设置提交 url 和应将数据加载到与当前对话框相同的节点的源。

覆盖选项卡(按钮位于其自己的选项卡中):

<?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" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="cq:Panel"
    title="Tags"
    extensionGet=".json"
    xtype="customcontentpanel">
    <items jcr:primaryType="cq:WidgetCollection">
        <button
            jcr:primaryType="cq:Widget"
            text="Load Tags"
            handler="function(button) {
                    var parent = button.findParentByType('panel');
                    var tabConf = CQ.shared.HTTP.eval(PATH_TO_TAB + '.infinity.json');
                    var tab = CQ.Util.formatData(tabConf);
                    for (var i=0; i&lt;tab.items.length; i++) {
                        parent.add(tab.items[i]);
                    }
                    parent.doLayout();
                    parent.loadContent();
                    parent.remove(button);
                }"
            xtype="button"/>
    </items>
</jcr:root>

说明:cq:Panel 需要使用 xtype="customcontentpanel" 和 extensionGet=".json"。默认情况下，其他属性继承自包含此面板的对话框。CQ.shared.HTTP.eval 加载 JSON 并将其转换为 JavaScript 对象。然后，CQ.Util.formatData 将 jcr:primaryType 等 XML 属性转换为 xtype。然后只需迭代刚刚加载的选项卡配置的所有元素并将它们添加到当前选项卡。由于这些小部件是在对话框初始加载后添加的，因此需要再次调用 doLayout() 以及 loadContent()。最后一步是删除按钮。