Blog

This article will shows you how to: one write ExtJS plugin and calls it in CQ dialog and two generating rootPath with ExtJS plugin.

We know that with xtype pathfield, we can set rootPath value to any location we want. The drawback is that it is static. If we set rootPath to /content, we fall into providing “no so good author experience” as content author needs to click through pages list to get to the desired page.

The solution would be to dynamically generate the value of rootPath. In this example, we will show you how to generate a list of child pages dynamically.

Using CQ Component Dialog

In the pathfield node’s properties, we add a property named: plugins and set its value to the name of the ExtJS plugin (i.e. customRootPathPlugin) that we are going to create.

In clientlibs, we create our plugin with categories: cq.wcm.edit

Our clientlibs’ folder	The clientlib’s properties

In /cq.wcm.edit.productNav/js/script.js, we would have our ExtJS plugin script:

    (function($) {
        var plugin = CQ.Ext.extend(CQ.Ext.emptyFn, {
            init: function(widget) {
                // create some JS logic to get the locale here
                // current path can be obtained via
                // widget.findParentByType('dialog').responseScope.path
                widget.treeRoot.name = CQ.HTTP.getPath();
            }
        });
        CQ.Ext.ComponentMgr.registerPlugin('customRootPathPlugin', plugin);
    }($CQ));

Finally, the dialog

In the dialog box, we would get the list of child pages that looks like this:

Credits

This blog post uses code originally written by Tomek Rekawek on Stack Overflow.