Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Read current crx path of multi field item, transfer it to a servlet, and load response from servlet into JsonStore to display in GridPanel

Avatar

Level 1

Hey guys

The title sums it up pretty well. I'm extending GridPanel and in that custom GridPanel I want to do the following:

  1. I want to retrieve the CRX path of the current (custom) multi field item, for example like this: findParentByType("CQ.Dialog").path
  2. Transfer that path as parameter to my servlet: /myservlet?path=currentCrxPath
  3. Take the JSON response from the servlet, load into a JsonStore and display it in the GridPanel

Until now i have the following code:

/** * custom grid view * @type {CQ.Ext.grid.GridPanel} */ Namics.form.ExternalFormReferences = CQ.Ext.extend(CQ.Ext.grid.GridPanel, { store: new CQ.Ext.data.JsonStore({ data: { references: [ {path: '/path/to/entry1', title: 'Entry 1'}, {path: '/path/to/entry2', title: 'Entry 2'} ] }, root: 'references', fields: ['path', 'title'] }), columns: [ { header: 'Path', width: .5, dataIndex: 'path' }, { header: 'Title', width: .35, dataIndex: 'title' } ], viewConfig: { forceFit: true }, sm: new CQ.Ext.grid.RowSelectionModel({singleSelect:true}), width:600, height:300, frame:true, iconCls:'icon-grid', constructor : function(config) { Namics.form.ExternalFormReferences.superclass.constructor.call(this, config); findParentByType("CQ.Dialog"); //return null (too early?) }, }); CQ.Ext.reg("externalformreferences", Namics.form.ExternalFormReferences);

I'm struggling in finding a good moment (be it listener or constructor) to fetch the current crx path, do the servlet call and later update the GridPanel. Do you have any tips for me? I'm currently working with static Json data until I have found a good listener/method to obtain the current crx path.

1 Accepted Solution

Avatar

Correct answer by
Level 1

ok guys, i got a working solution, i used a compositefield for it:

/** * custom grid view * @type {CQ.Ext.grid.GridPanel} */ Namics.form.ExternalFormReferences2 = CQ.Ext.extend(CQ.form.CompositeField, { listeners: { beforeshow: function (component) { var crxPath = this.findParentByType("dialog").path; var store = new CQ.Ext.data.JsonStore({ url: '/externalformsreferences?path=' + crxPath, root: 'references', fields: ['path'] }); store.load(); var columns = [ { header: 'Path', dataIndex: 'path' } ] var grid = new CQ.Ext.grid.GridPanel({ store: store, columns: columns, viewConfig: { forceFit: true }, sm: new CQ.Ext.grid.RowSelectionModel({singleSelect: true}), width: 600, height: 300 }); this.add(grid); } } }); CQ.Ext.reg("externalformreferences2", Namics.form.ExternalFormReferences2);

View solution in original post

2 Replies

Avatar

Correct answer by
Level 1

ok guys, i got a working solution, i used a compositefield for it:

/** * custom grid view * @type {CQ.Ext.grid.GridPanel} */ Namics.form.ExternalFormReferences2 = CQ.Ext.extend(CQ.form.CompositeField, { listeners: { beforeshow: function (component) { var crxPath = this.findParentByType("dialog").path; var store = new CQ.Ext.data.JsonStore({ url: '/externalformsreferences?path=' + crxPath, root: 'references', fields: ['path'] }); store.load(); var columns = [ { header: 'Path', dataIndex: 'path' } ] var grid = new CQ.Ext.grid.GridPanel({ store: store, columns: columns, viewConfig: { forceFit: true }, sm: new CQ.Ext.grid.RowSelectionModel({singleSelect: true}), width: 600, height: 300 }); this.add(grid); } } }); CQ.Ext.reg("externalformreferences2", Namics.form.ExternalFormReferences2);

Avatar

Level 10

Nice work -- anther option you can do is invoke a Sling Servlet to populate an xtype. In this article - a sling Servlet returns JSON data to populate an xtype:

http://helpx.adobe.com/experience-manager/using/creating-custom-cq-tree.html

A front end component build with xtypes can be extended to invoke a servlet to get data.