Data grid in CQ dialog

[krisgumm]

Hi,

I'm trying to implement a grid component . I have followed the below documentation for reference .

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

If I run the js files from the above link, I'm able to see a grid render in a window, however my requirement is to show a grid with data in a CQ dialog and on Click of 'OK' save the values in content page node as properties . 

Can any one guide me , how I can change the script from above link to show in a dialog instead of page or any other examples of showing a instance of cq grid editor panel in a dialog.

thanks in advance

[smacdonald2008 · Accepted solution]

The above article shows you the code for a grid. You can use that code and place it in a custom xtype named mygrid. Then you can embed the custom xtype into a dialog. Refer to this article for use on how to embed a custom xtype into a dialog:

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

[krisgumm]

Hi ,

 Thanks for your pointers . So I created a custom xtype  , in which I have defined a function getGridPanel and a listener . In getGridPanel i'm creating a grid instance and in beforeShow event calling getgridPanel method and adding to the container . However this doesn't seem to work  . I have pasted the code below  . I'm pretty sure i'm missing something here . Is my approach right ? What am I missing here ?

Ejst.CustomGridField = CQ.Ext.extend(CQ.form.CompositeField, { listeners: { beforeshow: function (component) { this.add(this.getGridPanel()); } }, // private getGridPanel: function() { var myData = [ ['3m Co',71.72,0.02,0.03,'9/1 12:00am'], ['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'], ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am'], ['Walt Disney Company (The) (Holding Company)',29.89,0.24,0.81,'9/1 12:00am'] ]; var store = new CQ.Ext.data.Store({ proxy: new CQ.Ext.data.MemoryProxy(myData), reader: new CQ.Ext.data.ArrayReader({}, [ {name: 'company'}, {name: 'price', type: 'float'}, {name: 'change', type: 'float'}, {name: 'pctChange', type: 'float'}, {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'} ]) }); store.load(); var gridPanel = new CQ.Ext.grid.GridPanel({ border:false, store: store, columns: [ { id:'company', header: "Company", dataIndex: 'company' },{ header: "Price", renderer: CQ.Ext.util.Format.usMoney, dataIndex: 'price' },{ header: "Change", dataIndex: 'change' },{ header: "% Change", dataIndex: 'pctChange' },{ header: "Last Updated", renderer: CQ.Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange' } ], viewConfig: { forceFit: true }, sm: new CQ.Ext.grid.RowSelectionModel({singleSelect:true}), iconCls:'icon-grid' }); gridPanel.getColumnModel().defaultSortable = true; return gridPanel; } }); // register xtype CQ.Ext.reg('ejstgridxx', Ejst.CustomGridField);