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

如果页面上分配了很多标签，则加载对话框可能要花费一些时间（最多20秒）。如果作者只想在多个页面上更改其他属性，这可能会很烦人。因此，问题是，有没有办法在对话框中延迟加载标签？

更确切地说，我正在谈论基于ExtJS的“经典UI”。

最佳答案

实际上，有两种方法可以实现此目的，都可以使用按钮触发负载：

打开一个子对话框：

<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将XML属性（例如jcr:primaryType）转换为xtype。
然后，只需遍历所有已加载选项卡配置的元素，然后将它们添加到当前选项卡即可。由于这些小部件是在对话框的初始加载之后添加的，因此需要再次调用doLayout()和loadContent()。最后一步是删除按钮。